Deux valeurs de cas de basculement dans l'angle

Question

En php et en java, nous pouvons faire

case 1:
case 2:
   echo "something";

pour que lorsque la valeur est 1 ou 2 "quelque chose" soit imprimé sur l'écran, je suis en train de construire une application angulaire et 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 utilisé pour un 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>

Je n'ai pas eu de chance, cela n'a pas fonctionné, est-ce que quelqu'un peut me suggérer la meilleure façon de procéder ?

Answer 1

(Heureusement, ce n'est pas le cas. ngSwitch est assez "bête" si l'on regarde le code source : il s'agit juste d'un === entre la valeur du cas et la valeur du commutateur. Deux options s'offrent à vous, mais elles sont toutes deux loin d'être excellentes.

L'option 1 consiste à utiliser la directive *ngSwitchDefault mais cela ne fonctionnera que si tous vos cas multiples sont de type FORM 1 :

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

L'autre option, qui est assez verbeuse, consiste à faire 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>

Answer 2

Vous pouvez utiliser ngTemplateOutlet pour la mettre en œuvre :

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

---

Mise à jour

Alors qu'Angular est toujours considérant de ce type, il y a l'article de jonrimmer sur les switch-cases.directive.ts . Exemple d'utilisation :

<ng-container [ngSwitch]="variable">
    <ng-container *jrSwitchCases="[1, 2]">FORM 1</ng-container>
    <ng-container *ngSwitchCase="3">FORM 2</ng-container>
    <ng-container *ngSwitchDefault>FORM 3</ng-container>
</ng-container>

Answer 3

Vous pouvez également utiliser la méthode suivante, qui est beaucoup plus souple. Vous pouvez alors mettre tout ce qui s'évalue en booléen comme valeur de *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 par rapport à l'utilisation des blocs *ngIf est que vous pouvez toujours spécifier une valeur par défaut.

Answer 4

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 y a plusieurs correspondances pour un cas, il utilise array.includes() au lieu de comparer chaque option individuellement.

Elle est particulièrement utile s'il y a plus de deux correspondances, car elle sera beaucoup plus condensée 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>

Answer 5

Comme MoshMage suggéré, j'ai fini par utiliser un *ngIf pour les composants qui gèrent plusieurs des options :

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