* NgIf का उपयोग कैसे करें?

Question

मैं Angular का उपयोग कर रहा हूं और मैं *ngIf elseइस उदाहरण में (संस्करण 4 के बाद से उपलब्ध) का उपयोग करना चाहता हूं :

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

मैं उसी व्यवहार को कैसे स्वीकार कर सकता हूं ngIf else?

Comments

एंगुलर 8 के लिए यहाँ देखें उदाहरण के साथ समझाया गया है NgIf, NgIf Else and NgIf उसके बाद Else freakyjolly.com/…

— कोड स्पाई

Answer 1

कोणीय 4 और 5 :

का उपयोग कर else:

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

आप भी उपयोग कर सकते हैं then else:

<div *ngIf="isValid;then content else other_content">here is ignored</div>    
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>

या thenअकेले:

<div *ngIf="isValid;then content"></div>    
<ng-template #content>content here...</ng-template>

डेमो:

Plunker

विवरण:

<ng-template>: Angular का MDN के<template> अनुसार टैग का अपना कार्यान्वयन है :

HTML <template>तत्व क्लाइंट-साइड कंटेंट को होल्ड करने के लिए एक मैकेनिज्म है जो किसी पेज के लोड होने पर रेंडर नहीं किया जाता है, लेकिन बाद में जावास्क्रिप्ट का उपयोग करके रनटाइम के दौरान तुरंत किया जा सकता है।

Comments

मुझे उम्मीद थी कि एक और तरीका है, बिना एनजी-टेम्प्लेट का उपयोग करने के लिए एक और टैग के बिना div की तरह, लेकिन अजीब तरह से यह नहीं है ... मुझे पता है कि <div> हटा दिया जाता है जैसा कि आप इसका उपयोग करते हैं, लेकिन यह कार्यान्वयन के रूप में अजीब है जैसा कि मुझे लगता है।

— एंड्रियास

@andreas आप इफ़ <ng-container>-क्लॉज़ के लिए उपयोग कर सकते हैं

— मार्टिन श्नाइडर

नोट: आप ng-containerकंटेनर का उपयोग कर सकते हैं जिसमें * ngIf हो, लेकिन टेम्पलेट के लिए नहीं

— Simon_Weaver

@Simon_Weaver मैंने इसे कठिन तरीका समझा। लेकिन क्यों? कारण है कि वे अनुमति नहीं दी *ngIf पर काम करने की ng-template?

— एरन मेडन

<div * ngIf = "। अमान्य है; फिर सामग्री को अन्य_कंटेंट"> यहाँ अनदेखा किया गया है </ div> इसे अनदेखा नहीं किया गया है। यह एनजी-टेम्प्लेट इंजेक्शन लगाने वाली जगह है

— डिमसन डी

Answer 2

कोणीय 4.xx में आप उपयोग कर सकते हैं ngIf यदि किसी और प्रक्रिया सरल प्राप्त करने के लिए चार रास्ते में:

1. जस्ट यूज इफ

   <div *ngIf="isValid">
       If isValid is true
   </div>
   

2. का उपयोग कर के साथ अगर (कृपया नोटिस करने के लिए टेम्पलेट )

   <div *ngIf="isValid; else templateName">
       If isValid is true
   </div>
   
   <ng-template #templateName>
       If isValid is false
   </ng-template>
   

3. तब के साथ यदि का उपयोग करना (कृपया टेम्पलेट को नोटिस करें )

   <div *ngIf="isValid; then templateName">
       Here is never showing
   </div>
   
   <ng-template #templateName>
       If isValid is true
   </ng-template>
   

4. तब और एल्स के साथ इफ़ेक्ट का उपयोग करना

   <div *ngIf="isValid; then thenTemplateName else elseTemplateName">
       Here is never showing
   </div>
   
   <ng-template #thenTemplateName>
       If isValid is true
   </ng-template>
   
   <ng-template #elseTemplateName>
       If isValid is false
   </ng-template>
   

युक्ति: ngIf अभिव्यक्ति का मूल्यांकन करता है और फिर उसके स्थान पर तत्कालीन या किसी अन्य टेम्पलेट को प्रस्तुत करता है जब अभिव्यक्ति क्रमशः सत्य या मिथ्या होती है। आमतौर पर:

• तब तक टेम्पलेट ngIf का इनलाइन टेम्प्लेट है, जब तक कि एक अलग मूल्य के लिए बाध्य न हो।
• बाकी टेम्पलेट खाली जब तक यह स्वाभाविक है है।

Comments

ऐसा लगता है जैसे संकलक स्वीकार नहीं करता है ...; else ...। संभवतः ;हटा दिया जाना चाहिए।

— slartidan

कोणीय -6 में, मैंने परीक्षण किया ...; else ...और इसने काम किया

— वासिफ

Answer 3

देखने योग्य के साथ काम करने के लिए, यह वही है जो मैं आमतौर पर प्रदर्शित करने के लिए करता हूं यदि अवलोकन योग्य सरणी में डेटा शामिल है।

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

Answer 4

"bindEmail" यह जाँच करेगा कि ईमेल उपलब्ध है या नहीं। अगर ईमेल मौजूद है तो लॉगआउट दिखाएगा अन्यथा लॉगिन दिखाएगा

<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>

Comments

यह काम नहीं करता है। यदि यह सही था, तो यह अभी भी कोई मूल्य नहीं जोड़ेगा क्योंकि स्वीकृत उत्तर पहले से ही दिखाता है कि यह कैसे करना है।

— गुंटर ज़ोचबॉयर

Answer 5

आप इसका उपयोग कर सकते हैं <ng-container>और <ng-template>प्राप्त कर सकते हैं

<ng-container *ngIf="isValid; then template1 else template2"></ng-container>

<ng-template #template1>
     <div>Template 1 contains</div>
</ng-template>

<ng-template #template2>
     <div>Template 2 contains </div>
</ng-template>

आप नीचे Stackblitz लाइव डेमो पा सकते हैं

लाइव डेमो

आशा है कि यह मदद करेगा ... !!!

Answer 6

के लिए कोणीय 9/8

स्रोत लिंक उदाहरण के साथ

    export class AppComponent {
      isDone = true;
    }

1) * एनजीआईएफ

    <div *ngIf="isDone">
      It's Done!
    </div>

    <!-- Negation operator-->
    <div *ngIf="!isDone">
      It's Not Done!
    </div>

2) * एनजीआई और एल्स

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

3) * एनजीआईएफ, तब और एल्स

    <ng-container *ngIf="isDone;  then iAmDone; else iAmNotDone">
    </ng-container>

    <ng-template #iAmDone>
      It's Done!
    </ng-template>

    <ng-template #iAmNotDone>
      It's Not Done!
    </ng-template>

Comments

यह केवल वही दोहराता है जो स्वीकृत उत्तर पहले से ही कहा गया है

— phil294

Answer 7

एनजीआईएफ / एल्स के लिए सिंटैक्स

<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>

NgIf / Else / फिर स्पष्ट वाक्य रचना का उपयोग करना

फिर टेम्पलेट जोड़ने के लिए हमें इसे स्पष्ट रूप से एक टेम्पलेट में बांधना होगा।

<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div> 
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>

NgIf और Async पाइप के साथ वेधशालाएँ

अधिक जानकारी के लिए

Answer 8

बस कोणीय 8 से नए अपडेट जोड़ें।

1. यदि किसी अन्य के साथ मामला है, तो हम ngIf और ngIfElse का उपयोग कर सकते हैं ।

<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

2. मामले के लिए अगर तब के साथ, हम ngIf और ngIfThen का उपयोग कर सकते हैं ।

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>

3. मामले के लिए अगर तब और किसी के साथ, हम ngIf , ngIfThen और ngIfElse का उपयोग कर सकते हैं ।

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

Comments

महान! हम हाल ही में कोणीय 8

— इस्लाम मुर्तज़ेव

Answer 9

कोणीय 4.0 में if..elseसिंटैक्स जावा में सशर्त ऑपरेटरों के समान है।

जावा में आप उपयोग करते हैं "condition?stmnt1:stmnt2"।

कोणीय 4.0 में आप उपयोग करते हैं *ngIf="condition;then stmnt1 else stmnt2"।

Comments

ओरेकल केस जैसा दिखता है जब अभिव्यक्ति .. :-)

— पीटर

आप उन टर्नरी ऑपरेटर की बात कर रहे हैं जो अधिकांश सी-आधारित भाषाओं में मौजूद हैं लेकिन यह कोटलिन के भावों के करीब है ।

— मिथक

Answer 10

एनजीएफ अभिव्यक्ति जिसके परिणामस्वरूप मूल्य सिर्फ बूलियन सही या गलत नहीं होगा

अगर अभिव्यक्ति सिर्फ एक वस्तु है, यह अभी भी सच्चाई के रूप में मूल्यांकन करता है।

यदि वस्तु अपरिभाषित है, या गैर-मौजूद है, तो एनसिफ़ इसका मूल्यांकन मिथ्यात्व के रूप में करेगा।

सामान्य उपयोग यदि किसी वस्तु को लोड किया जाता है, मौजूद है, तो इस वस्तु की सामग्री को प्रदर्शित करें, अन्यथा "लोडिंग ......." प्रदर्शित करें।

 <div *ngIf="!object">
     Still loading...........
 </div>

<div *ngIf="object">
     <!-- the content of this object -->

           object.info, object.id, object.name ... etc.
 </div>

एक और उदाहरण:

  things = {
 car: 'Honda',
 shoes: 'Nike',
 shirt: 'Tom Ford',
 watch: 'Timex'
 };

 <div *ngIf="things.car; else noCar">
  Nice car!
 </div>

<ng-template #noCar>
   Call a Uber.
</ng-template>

 <!-- Nice car ! -->

एंथोअर उदाहरण:

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->

ngif टेम्पलेट

ngif कोणीय ४

Answer 11

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>

Answer 12

HTML टैग या टेम्प्लेट पर स्थिति होने पर उपयोग करने की दो संभावनाएँ हैं:

1. * HTML टैग पर CommonModule से निर्देश प्राप्त करें;
2. यदि नहीं तो

Answer 13

<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font">    </div>

<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>

Answer 14

कोणीय 4, 5 और 6 में

हम बस एक टेम्प्लेट रेफरेंस वैरिएबल ^[2] बना सकते हैं और लिंक को * ngIf डायरेक्टिव के अंदर दूसरी कंडीशन में लिंक कर सकते हैं

संभावित सिंटैक्स ^[1] हैं:

<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>


<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>

<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>


<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>

DEMO: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html

सूत्रों का कहना है:

1. https://angular.io/api/common/NgIf#syntax
2. https://angular.io/guide/template-syntax#template-reference-variables--var-

Answer 15

आप जावास्क्रिप्ट शॉर्ट टर्नरी सशर्त ऑपरेटर का भी उपयोग कर सकते हैं? इस तरह से कोणीय में:

{{doThis() ? 'foo' : 'bar'}}

या

<div [ngClass]="doThis() ? 'foo' : 'bar'">

Answer 16

मुझे पता है कि यह एक समय हो गया है, लेकिन अगर यह मदद करता है तो इसे जोड़ना चाहता हूं। जिस तरह से मैं के बारे में के साथ चला गया घटक में दो झंडे और दो ngIfs इसी दो झंडे के लिए है।

यह सरल और सामग्री के साथ अच्छी तरह से काम करता था क्योंकि एनजी-टेम्पलेट और सामग्री एक साथ अच्छी तरह से काम नहीं कर रहे थे।