Deux valeurs de boîtier de commutation en angulaire

En php et java, nous pouvons faire

case 1:
case 2:
   echo "something";

de sorte que lorsque la valeur est 1 ou 2 "quelque chose" sera imprimé à l'écran, je construis une application angulaire je fais quelque chose comme ci-dessous

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

Le formulaire qui est utilisé pour le choix unique peut être utilisé pour un choix multiple, mais j'ai essayé quelque chose comme ci-dessous pour le rendre plus organisable

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

Ma malchance, cela n'a pas fonctionné, quelqu'un peut-il suggérer la meilleure façon de le faire.

(Un) heureusement vous ne pouvez pas; le ngSwitchest assez «stupide» si vous regardez le code source: c'est juste un ===entre la valeur de cas et la valeur de commutateur. Vous avez deux options, mais les deux sont loin d'être excellentes.

L'option 1 utilise la directive *ngSwitchDefault, mais cela ne fonctionnera que si tous vos cas multiples sont de FORMULE 1:

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

L'autre option, qui est assez verbeuse, fait quelque chose comme ceci:

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

Vous pouvez également utiliser ce qui suit, qui est beaucoup plus flexible. Vous pouvez ensuite mettre tout ce qui évalue booléen comme valeur * 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>

L'avantage de cela par rapport à l'utilisation des blocs * ngIf est que vous pouvez toujours spécifier une valeur par défaut.

Vous pouvez utiliser ngTemplateOutletpour implémenter ceci:

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

Comme MoshMage l'a suggéré, j'ai fini par utiliser un *ngIfpour gérer cela pour les composants qui géraient plusieurs des options:

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

Voici une variante qui combine la deuxième réponse de Fabio avec celle de brian3kb pour produire une solution plus condensée sans obscurcir le sens.

S'il existe plusieurs correspondances pour un cas, il utilise array.includes()au lieu de comparer chaque option individuellement.

Il est particulièrement utile s'il y a plus de deux correspondances car il sera beaucoup plus condensé par rapport à la réponse acceptée.

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

Si les correspondances se trouvent dans une variable, vous pouvez utiliser array.indexOf()pour éviter l'utilisation de l'opérateur ternaire conditionnel.

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

S'il vous plaît essayer ng-switch-when-separator="|"deng-switch

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

Voici comment je le ferais:

Dans votre .component.ts:

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

Ensuite, dans votre fichier de modèle, vous pouvez faire quelque chose comme ceci:

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

Attention cependant aux fautes de frappe ...