значение случае два переключателя в angular2

Question

В PHP и Java мы можем сделать

case 1: 
case 2: 
    echo "something"; 

так, что, когда значение равно 1 или 2 «что-то» будет напечатаны на экране, я строй углового приложения я нахожусь делать что-то вроде ниже

<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> 

формы, которая используется для выбора одного может быть использована для Mutiple выбора, но я пытался что-то вроде ниже, чтобы сделать его более organisable

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

Моя неудача не работала, может кто-нибудь предложить лучший способ сделать это.

Answer 1

(Un) К счастью, вы не можете, ngSwicth это довольно «немой», если вы посмотрите на исходный код, это всего лишь === между значением случая и значением переключателя. У вас есть два варианта, но оба они далеки от великих.

Вариант 1 использует директиву *ngSwitchDefault, но это будет работать только тогда, когда все ваши многочисленные случаи FORM 1:

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

Другой вариант, который является довольно громоздким, будет делать что-то вроде этого:

<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> 

Answer 2

Как MoshMage предложил, я закончил с использованием *ngIf, чтобы справиться с этим для компонентов, которые обрабатываются несколько вариантов:

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

Answer 3

Вы также можете использовать следующее, что намного более гибко. Затем вы можете поместить все, что оценивается как boolean, как значение * ngSwitchCase.

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

Преимущество, связанное с использованием блоков * ngIf, заключается в том, что вы по-прежнему можете указать значение по умолчанию.