2016-10-21 7 views
15

in PHP und Java wir, dassZwei Schaltergehäuse Werte in angular2

case 1: 
case 2: 
    echo "something"; 

so tun können, wenn der Wert 1 oder 2 „etwas“ auf dem Bildschirm gedruckt werden, ich bin der Aufbau eine Winkel Anwendung ich bin so etwas wie die unten

<div [ngSwitch]="data.type"> 
    <div *ngSwitchCase="'multi-choice'">FORM 1</div> 
    <div *ngSwitchCase="'singe-choice'">FORM 1</div> 
    <div *ngSwitchCase="'range'">FORM 2</div> 
</div> 

der Form zu tun, die für einzelne Wahl verwendet wird, kann für mutiple Wahl verwendet werden, aber ich versuchte, so etwas wie unten, um es organisierbar

<div [ngSwitch]="data.type"> 
    <div *ngSwitchCase="'multi-choice' || 'singe-choice'">FORM 1</div> 
</div> 

Mein Pech es hat nicht funktioniert, kann jemand den besseren Weg vorschlagen, dies zu tun.

+0

Siehe auch https://github.com/angular/angular/issues/12174 – yurzui

Antwort

37

(Un) zum Glück können Sie nicht, die ngSwicth es ist ziemlich "dumm", wenn Sie den Quellcode betrachten, es ist nur ein === zwischen dem Fall Wert und der Switch-Wert. Sie haben zwei Möglichkeiten, aber beide sind alles andere als großartig.

Option 1 wird mit der Richtlinie *ngSwitchDefault, aber das wird nur funktionieren, wenn alle mehrere Fälle FORM sind 1:

<div [ngSwitch]="data.type"> 
    <div *ngSwitchDefault>FORM 1</div> 
    <div *ngSwitchCase="'range'">FORM 2</div> 
</div> 

Die andere Option, die sehr ausführlich ist, wäre so etwas wie dies tun:

<div [ngSwitch]="data.type"> 
    <div *ngSwitchCase="data.type === 'multi-choice' || data.type === 'singe-choice' ? data.type : '' ">FORM 1</div> 
    <div *ngSwitchCase="'range'">FORM 2</div> 
</div> 
+1

Momentan folge ich der ersten Methode – Niyaz

+3

Ich gehe für die zweite, weil der Standard etwas anderes bedeutet, danke für diese Idee! –

+0

Ich werfe das da raus, wenn jemand 'oder' einen' Switch Case' braucht ... vielleicht brauchst du einen '* ngIf' anstelle eines Schalters: \ – MoshMage

4

Wie MoshMage vorgeschlagen, landete ich einen *ngIf mit bis diese für die Komponenten zu handhaben, die mehrere der Optionen behandelt:

*ngIf="['Transformation', 'Field Mapping', 'Filter'].includes(selectedWorkflow.type)" 
9

Sie können auch Folgendes verwenden, das viel flexibler ist. Sie können dann alles, was als boolescher Wert ausgewertet wird, als * ngSwitchCase-Wert verwenden.

Der Vorteil gegenüber * ngIf-Blöcken ist, dass Sie immer noch einen Standard angeben können.