वहाँ कोणीय 4

Question

में elseif है मैं

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

ऊपर बयान में एकाधिक शर्तों सच हो सकता है बयान की एक संख्या है।

लेकिन मैं क्या चाहते हैं, है पहले बयान के लिए पहली जांच करता है, तो सच तो प्रदर्शित करने और बाकी

छोड़ झूठी है, तो दूसरे के लिए जाँच और इतने

यह कैसे प्राप्त करने के लिए पर?

Answer 1

नहीं वर्तमान में elseif समर्थित नहीं है

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

Answer 2

आप उपयोग करने का प्रयास कर सकते हैं ngIf निर्देश की तरह:

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

ng-container के साथ के रूप में दिखाई देगा इस प्रकार है:

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

लेकिन मैं निम्नलिखित समाधान की पेशकश कर सकते हैं पाश बयान के लिए उपयोग करना चाहते हैं:

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

जहां conditions

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

Plunker Example

Answer 3

क्यों सिर्फ ऐसा नहीं घटक में अधिक काम:

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

घटक कोड में

:

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

की