Due valori di caso di commutazione in angolare

In php e java possiamo farlo

case 1:
case 2:
   echo "something";

in modo che quando il valore è 1 o 2 "qualcosa" verrà stampato sullo schermo, sto costruendo un'applicazione angolare sto facendo qualcosa di simile al seguente

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

Il modulo utilizzato per la scelta singola può essere utilizzato per la scelta multipla, ma ho provato qualcosa di simile sotto per renderlo più organizzabile

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

La mia sfortuna non ha funzionato, qualcuno può suggerire il modo migliore per farlo.

(Dis) fortunatamente non puoi; il ngSwitchè abbastanza "stupido" se guardi il codice sorgente: è solo un ===tra il valore case e il valore switch. Hai due opzioni, ma entrambe sono tutt'altro che eccezionali.

L'opzione 1 utilizza la direttiva *ngSwitchDefault, ma funzionerà solo se tutti i tuoi casi multipli sono FORM 1:

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

L'altra opzione, che è piuttosto prolissa, sta facendo qualcosa del genere:

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

Puoi anche usare quanto segue, che è molto più flessibile. È quindi possibile inserire tutto ciò che restituisce booleano come valore * 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>

Il vantaggio che questo ha rispetto all'uso dei blocchi * ngIf è che puoi ancora specificare un valore predefinito.

Puoi usare ngTemplateOutletper implementare questo:

<ng-container [ngSwitch]="variable">
    <ng-container *ngSwitchCase="1">
        <ng-container *ngTemplateOutlet="form1"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="2">
        <ng-container *ngTemplateOutlet="form1"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="3">FORM 2</ng-container>
    <ng-container *ngSwitchDefault>FORM 3</ng-container>
    <ng-template #form1>FORM 1</ng-template>
</ng-container>

Come suggerito da MoshMage , ho finito per usare un *ngIfper gestire questo per i componenti che gestivano molte delle opzioni:

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

Ecco una variazione che combina la seconda risposta di Fabio con quella di brian3kb per produrre una soluzione più condensata senza offuscare il significato.

Se sono presenti più corrispondenze per un caso, utilizza array.includes()invece di confrontare ciascuna opzione singolarmente.

È particolarmente utile se ci sono più di due corrispondenze poiché sarà molto più condensato rispetto alla risposta accettata.

<div [ngSwitch]="data.type">
   <div *ngSwitchCase="['multi-choice', 'singe-choice'].includes(data.type) ? data.type : ''">FORM 1</div>
   <div *ngSwitchCase="'range'">FORM 2</div>
   <div *ngSwitchDefault>FORM 3</div>
</div>

Se le corrispondenze si trovano in una variabile, è possibile utilizzare array.indexOf()per evitare l'uso dell'operatore ternario condizionale.

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="matches[matches.indexOf(data.type)]">FORM 1</div>
  <!-- ... -->
</div>

Si prega di provare ng-switch-when-separator="|"ang-switch

<div ng-switch="temp">
    <div ng-switch-when="1|2" ng-switch-when-separator="|"> echo "something"</div>
</div>

Ecco come lo farei:

Nel tuo .component.ts:

getFormType(type: string) {
  switch(type) {
    case 'singe-choice':
    case 'multi-choice':
      return 'singe-choice|multi-choice'
    default:
      return type;
  }
}

Quindi, nel tuo file modello, puoi fare qualcosa del genere:

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

Attenzione però agli errori di battitura ...