Czy istnieje elseif w Kątowymi 4

Question

Mam szereg sprawozdań

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

Wiele warunki powyższe stwierdzenie może być prawdziwe.

Ale co chcę jest najpierw sprawdzić pierwsze pismo jeśli prawdą następnie wyświetlić i zostawić resztę

Jeśli false, a następnie sprawdzić na drugi i tak dalej

jak to osiągnąć?

Answer 1

Nie Obecnie elseif nie jest obsługiwana

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

Answer 2

Można spróbować użyć dyrektywy ngIf jak:

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

z ng-container będzie wyglądać następująco:

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

Ale jeśli chcesz używać dla instrukcji pętli mogę zaoferować następujące rozwiązanie:

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

gdzie conditions

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

Plunker Example

Answer 3

Dlaczego po prostu nie robić więcej pracy w komponencie:

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

w kodzie składnika:

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