* अगर टेम्पलेट में एनजीआई बाकी है

Question

एक *ngIfबयान में मेरे कई मामले कैसे होंगे ? मैं एक होने के साथ Vue या कोणीय 1 करने के लिए इस्तेमाल कर रहा हूँ if, else ifऔर else, लेकिन यह कोणीय 4 की तरह लगता है केवल एक है true( if) और false( else) हालत।

प्रलेखन के अनुसार, मैं केवल यह कर सकता हूं:

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

लेकिन मैं कई शर्तें रखना चाहता हूं (जैसे कुछ):

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

लेकिन मैं उपयोग करने के लिए समाप्त हो रहा हूं ngSwitch, जो हैक की तरह महसूस करता है:

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

वैकल्पिक रूप से, ऐसा लगता है कि मुझे Angular 1 और Vue से उपयोग किए गए बहुत सारे वाक्यविन्यास Angular 4 में समर्थित नहीं हैं, इसलिए इस तरह की स्थितियों के साथ मेरे कोड को बनाने के लिए अनुशंसित तरीका क्या होगा?

Comments

मैं सोच रहा था कि आप हैक सबसे अच्छा समाधान था क्योंकि यह सबसे अधिक पठनीय था। हालाँकि मुझे एहसास हुआ है कि कोणीय स्विच स्टेटमेंट कई मानदंडों के मिलान की अनुमति देते हैं ताकि आपको वह वास्तविक रूप तर्क न मिले।

— टॉम बेयन

Answer 1

एक अन्य विकल्प घोंसला की स्थिति है

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

Comments

यह मेरे लिए बेहतर समाधान था। मेरी स्थितियां कई चर पर आधारित थीं और एक से अधिक एक ही समय में सच होने में सक्षम थीं।

— मैट डेकोक

क्या हम जैसे उपयोग नहीं कर सकते<ng-template #second *ngIf="foo === 2;else third">

— लोकी

चतुर। फ्रेमवर्क tbh

— Pogrindis

Answer 2

आप बस उपयोग कर सकते हैं:

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

जब तक एनजी-कंटेनर हिस्सा आपके डिजाइन के लिए महत्वपूर्ण है, मुझे लगता है।

यहाँ एक प्लंकर है

Comments

मेरा उदाहरण थोड़ा सा सरल है, लेकिन 'और अगर ’व्यवहार की अपेक्षा if (index === 1) else if (foo === 2)करना है, if (index === 1) if (index !== 1 && foo === 2)जिसमें ऐसा लिखना होगा जो थोड़ा गन्दा हो और त्रुटियों के लिए अधिक प्रवण हो, तो हमें उलटे तर्क लिखने होंगे।

क्या आपने प्लंकर को देखा है? मुझे नहीं लगता कि मैं इस मुद्दे को देखता हूं, सूचकांक केवल एक समय में 1 चीज होने जा रहा है।

— डायलन

मुझे लगता है कि यह मेरा उदाहरण है जिसमें स्पष्टीकरण की कमी है, यहाँ JS में एक उदाहरण है: if (item === 'food' && kind === 'hamburger') {} else if (item === 'food' && kind === 'hotdog') {} else if (item === 'drink' && kind === 'beer') {} else if (item === 'drink' && kind === 'wine') {} else { /* could be poisonous */ }

उस उदाहरण में अभी भी बहुत अधिक पारस्परिक बहिष्कार है, लेकिन फिर भी, बिंदु है, मुझे ऐसा करने की आवश्यकता है, और यदि, और नहीं, तो बस और अगर नहीं तो बेमानी तर्क लिखे बिना। ऐसा लगता है कि एंगुलर 4 के टेम्प्लेट में इस तरह के तर्क का अभाव है।

कुछ अन्य विकल्प हैं, यह लगता है कि आप NgTemplateOutletसंदर्भ के साथ लाभ प्राप्त कर सकते हैं जैसे * ngTemplateOutlet = "पेय; संदर्भ: बीयर", या हो सकता है श्रेणीबद्ध करने के लिए एक और घटक।

— डायलन

Answer 3

यह सबसे साफ तरीका लगता है

if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

टेम्पलेट में:

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

ध्यान दें कि यह एक उचित else ifकथन की तरह काम करता है जब शर्तों में विभिन्न चर शामिल होते हैं (एक समय में केवल 1 मामला सत्य होता है)। ऐसे मामलों में कुछ अन्य उत्तर सही काम नहीं करते हैं।

अलग: gosh कोणीय, कि वास्तव में कुछ बदसूरत else ifटेम्पलेट कोड है ...

Answer 4

आप स्थिति के आधार पर कई तरीके का उपयोग कर सकते हैं:

1. यदि आप परिवर्तनीय विशिष्ट संख्या या स्ट्रिंग तक सीमित हैं , तो सर्वोत्तम तरीका ngSwitch या 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. ऊपर और कोड और गतिशील कोड के लिए उपयुक्त नहीं है , तो आप नीचे दिए गए कोड का उपयोग कर सकते हैं:

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

नोट: आप कोई भी प्रारूप चुन सकते हैं, लेकिन ध्यान दें कि हर कोड की अपनी समस्याएं हैं

Comments

IMO 2. के *ngIf="foo >= 7; then t7"बजाय पढ़ना चाहिए ... else t7।

— hgoebl

मुझे लगता है कि दूसरे के साथ सिर्फ दो लाइनें foo >= 4 && foo <= 6; then t46; else t7काम करनी चाहिए।

— बादल

Answer 5

घोंसले के शिकार और ngSwitch से बचने के लिए, यह संभावना भी है, जो जावास्क्रिप्ट में तार्किक ऑपरेटरों के काम करने के तरीके का लाभ उठाता है:

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

Answer 6

या हो सकता है बस टर्नरी ऑपरेटर के साथ सशर्त जंजीरों का उपयोग करें। if … else if … else if … elseजंजीर।

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator#Conditional_chains

<ng-container *ngIf="isFirst ? first: isSecond ? second : third"></ng-container>

<ng-template #first></ng-template>
<ng-template #second></ng-template>
<ng-template #third></ng-template>

मुझे यह एप्रोच ज्यादा अच्छा लगता है।

Answer 7

<ion-row *ngIf="cat === 1;else second"></ion-row>
<ng-template #second>
    <ion-row *ngIf="cat === 2;else third"></ion-row>
</ng-template>
<ng-template #third>

</ng-template>

कोणीय पहले से ही संरचनात्मक निर्देशों में से कई में हुड के तहत एनजी-टेम्पलेट का उपयोग कर रहा है जो हम हर समय का उपयोग करते हैं: एनजीआईएफ, एनजीफोर और एनस्विच।

> कोणीय में एनजी-टेम्पलेट क्या है

https://www.angularjswiki.com/angular/what-is-ng-template-in-angular/

Answer 8

आप इस पुरानी चाल का उपयोग जटिल बदलने के लिए कर सकते हैं यदि / या फिर थोड़ा क्लीनर स्विच स्टेटमेंट में ब्लॉक करता है:

<div [ngSwitch]="true">
    <button (click)="foo=(++foo%3)+1">Switch!</button>

    <div *ngSwitchCase="foo === 1">one</div>
    <div *ngSwitchCase="foo === 2">two</div>
    <div *ngSwitchCase="foo === 3">three</div>
</div>