* ngSi d'autre si dans le template

Question

Comment aurais-je un cas multiples dans un *ngIf déclaration? Je suis habitué à Vue ou Angulaire 1 avec le fait d'avoir un if, else if, et else, mais il semble Angulaire 4 ne dispose que d'un true (if) et false (else).

Selon la documentation, je ne peux faire:

  <ng-container *ngIf="foo === 1; then first else second"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

Mais je veux avoir plusieurs conditions (quelque chose comme):

  <ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

Mais je suis en terminant avoir à utiliser ngSwitch, ce qui se sent comme un hack:

  <ng-container [ngSwitch]="true">
    <div *ngSwitchCase="foo === 1">First</div>
    <div *ngSwitchCase="bar === 2">Second</div>
    <div *ngSwitchDefault>Third</div>
  </ng-container>

Alternativement, il semble que beaucoup de syntaxes j'ai utilisé pour Angulaires 1 et la Vue ne sont pas pris en charge dans Angulaire 4, alors quelle serait la méthode recommandée pour la structure de mon code avec des conditions comme ça?

Answer 1

Une autre alternative est de nidifier les conditions

 <ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
    <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>
 

Answer 2

Vous pouvez simplement utiliser:

 <ng-template [ngIf]="index == 1">First</ng-template>
<ng-template [ngIf]="index == 2">Second</ng-template>
<ng-template [ngIf]="index == 3">Third</ng-template>
 

Je suppose que la partie conteneur ng est importante pour votre conception.

Voici un plunker

Answer 3

Cela semble être la façon la plus propre de faire

 if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}
 

dans le modèle:

 <ng-container *ngIf="foo === 1; else elseif1">foo === 1</ng-container>
<ng-template #elseif1>
    <ng-container *ngIf="bar === 99; else elseif2">bar === 99</ng-container>
</ng-template>
<ng-template #elseif2>
    <ng-container *ngIf="foo === 2; else else1">foo === 2</ng-container>
</ng-template>
<ng-template #else1>else</ng-template>
 

Notez que cela fonctionne comme une déclaration correcte else if devrait quand les conditions impliquent différentes variables (seulement 1 cas est vrai à la fois). Certaines des autres réponses ne fonctionnent pas correctement dans un tel cas.

à part: gosh angular, c’est vraiment vilain else if code de template ...

Answer 4

Vous pouvez utiliser plusieurs méthodes basées sur sitaution:

1. Si votre variable est limitée à un nombre ou une chaîne spécifique, la meilleure façon consiste à utiliser ngSwitch ou ngIf:

    <!-- foo = 3 -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="1">First Number</div>
       <div *ngSwitchCase="2">Second Number</div>
       <div *ngSwitchCase="3">Third Number</div>
       <div *ngSwitchDefault>Other Number</div>
   </div>
   
   <!-- foo = 3 -->
   <ng-template [ngIf]="foo === 1">First Number</ng-template>
   <ng-template [ngIf]="foo === 2">Second Number</ng-template>
   <ng-template [ngIf]="foo === 3">Third Number</ng-template>
   
   
   <!-- foo = 'David' -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="'Daniel'">Daniel String</div>
       <div *ngSwitchCase="'David'">David String</div>
       <div *ngSwitchCase="'Alex'">Alex String</div>
       <div *ngSwitchDefault>Other String</div>
   </div>
   
   <!-- foo = 'David' -->
   <ng-template [ngIf]="foo === 'Alex'">Alex String</ng-template>
   <ng-template [ngIf]="foo === 'David'">David String</ng-template>
   <ng-template [ngIf]="foo === 'Daniel'">Daniel String</ng-template>
    

2. Ci-dessus ne convient pas pour les codes if if else else et les codes dynamiques, vous pouvez utiliser le code ci-dessous:

    <!-- foo = 5 -->
   <ng-container *ngIf="foo >= 1 && foo <= 3; then t13"></ng-container>
   <ng-container *ngIf="foo >= 4 && foo <= 6; then t46"></ng-container>
   <ng-container *ngIf="foo >= 7; then t7"></ng-container>
   
   <!-- If Statement -->
   <ng-template #t13>
       Template for foo between 1 and 3
   </ng-template>
   <!-- If Else Statement -->
   <ng-template #t46>
       Template for foo between 4 and 6
   </ng-template>
   <!-- Else Statement -->
   <ng-template #t7>
       Template for foo greater than 7
   </ng-template>
    

Remarque: vous pouvez choisir n’importe quel format, mais notez que chaque code a ses propres problèmes.