web-dev-qa-db-fra.com

Y a-t-il d'autre Si dans Angular 4

J'ai un certain nombre de déclarations

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

Plusieurs conditions dans la déclaration ci-dessus peuvent être vraies.

Mais ce que je veux, c'est d'abord vérifier la première déclaration si elle est vraie puis afficher et laisser le reste

Si faux, vérifiez la seconde et ainsi de suite

comment y parvenir?

angularangular-ng-if
13
Ankit Raonka

Vous pouvez essayer d'utiliser la directive ngIf comme:

<ng-template [ngIf]="xyz == 1" [ngIfElse]="second">First</ng-template>
<ng-template #second>
  <ng-template [ngIf]="pqr == 2" [ngIfElse]="third">Second</ng-template>
</ng-template>
<ng-template #third>
  <ng-template [ngIf]="abc == 3">Third</ng-template>
</ng-template>

avec ng-container il ressemblera à ceci:

<ng-container *ngIf="xyz == 1; else second">First</ng-container>
<ng-template #second>
    <ng-container *ngIf="pqr == 2; else third">Second</ng-container>
</ng-template>
<ng-template #third>
    <ng-container *ngIf="abc == 3">Third</ng-container>
</ng-template>

Mais si vous souhaitez utiliser pour l'instruction loop, je peux proposer la solution suivante:

<ng-container *ngTemplateOutlet="next; context: { $implicit: 0 }"></ng-container>

<ng-template #next let-i>
  <ng-container *ngIf="conditions[i]">
    <ng-container *ngIf="conditions[i] && conditions[i].condition(); else shift">{{ conditions[i].result }}</ng-container>
      <ng-template #shift >
        <ng-container *ngTemplateOutlet="next; context: { $implicit: i + 1 }"></ng-container>
      </ng-template>
  </ng-container>
</ng-template>

où conditions

conditions = [
  {
    condition: () => this.xyz === 1,
    result: 'First'
  },
  {
    condition: () => this.pqr === 2,
    result: 'Second'
  },
  {
    condition: () => this.abc === 3,
    result: 'Third'
  }
];

Exemple Plunker

7
yurzui

Non Actuellement, elseif n'est pas pris en charge

Ngifelse https://angular.io/api/common/NgIf

2
piyush gupta

Pourquoi ne pas simplement travailler davantage sur le composant:

<ng-template [ngIf]="status == 'first'">First</ng-template>
<ng-template [ngIf]="status == 'second'">Second</ng-template>
<ng-template [ngIf]="status == 'third'">Third</ng-template>

dans le code composant:

status string;
if (xyz == 1)
   status = 'first';
else if (pqr == 2)
   status = 'second';
else if (abc == 3)
   status = 'third';
1
Dean Chalk