est-il ELSEIF dans angulaire 4

Question

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> 

conditions multiples dans la déclaration ci-dessus peuvent être vrai.

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

Si elle est fausse, vérifiez pour la deuxième et ainsi de suite

comment y parvenir?

Answer 1

Non Actuellement elseif est pas pris en charge

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

Answer 2

Vous pouvez essayer d'utiliser ngIf directive 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 regardera comme suit:

<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 voulez utiliser pour instruction de boucle je peux offrir 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' 
    } 
]; 

Plunker Example

Answer 3

Pourquoi ne pas simplement faire plus de travail dans 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';