ฉันกำลังใช้ Angular และฉันต้องการใช้*ngIf else(มีให้ตั้งแต่รุ่น 4) ในตัวอย่างนี้:

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

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

ฉันจะบรรลุพฤติกรรมเดียวกันได้ngIf elseอย่างไร

เชิงมุม 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>: เป็นการใช้งาน<template>แท็กของ Angular ซึ่งเป็นไปตามMDN :

<template>องค์ประกอบHTML เป็นกลไกในการเก็บเนื้อหาฝั่งไคลเอ็นต์ซึ่งจะไม่ถูกแสดงผลเมื่อโหลดหน้าเว็บ แต่อาจถูกสร้างอินสแตนซ์ระหว่างรันไทม์โดยใช้ JavaScript

ใน Angular 4.xx คุณสามารถใช้ngIf ได้สี่วิธีเพื่อให้ง่ายถ้าโพรซีเดอร์อื่น:

1. เพียงแค่ใช้ถ้า

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

2. การใช้If with Else (โปรดสังเกตว่าtemplateName )

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

3. ใช้If with With (โปรดสังเกตว่าtemplateName )

   <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ประเมินการแสดงออกแล้วแสดงผลแล้วหรืออื่น แม่แบบในสถานที่เมื่อแสดงออก truthy หรือ falsy ตามลำดับ โดยทั่วไปแล้ว:

• แม่แบบนั้นเป็นแม่แบบอินไลน์ของngIfเว้นแต่ผูกพันกับค่าที่แตกต่าง
• แม่แบบอื่นจะว่างเปล่าเว้นแต่ว่าจะถูกผูกไว้

ในการทำงานกับสิ่งที่สังเกตได้นี่คือสิ่งที่ฉันมักจะทำเพื่อแสดงว่าอาร์เรย์ที่สังเกตได้นั้นประกอบด้วยข้อมูลหรือไม่

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

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

คุณสามารถใช้<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 Live ได้ที่ด้านล่าง

การสาธิตสด

หวังว่านี่จะช่วย ... !!!

สำหรับเชิงมุม 9/8

ลิงค์ ซอร์สกับตัวอย่าง

    export class AppComponent {
      isDone = true;
    }

1) * ngIf

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

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

2) * ngIf และอื่น ๆ

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

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

3) * ngIf, และอื่น ๆ

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

ไวยากรณ์สำหรับ ngIf / Else

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

ใช้ NgIf / Else / Then ไวยากรณ์ที่ชัดเจน

หากต้องการเพิ่มเทมเพลตเราต้องผูกมันไว้กับเทมเพลตอย่างชัดเจน

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

Observables ด้วย NgIf และ Async Pipe

สำหรับรายละเอียดเพิ่มเติม

เพียงเพิ่มการอัปเดตใหม่จาก Angular 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และngIf จากนั้น

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

ในif..elseไวยากรณ์Angular 4.0 ค่อนข้างคล้ายกับตัวดำเนินการตามเงื่อนไขใน Java

ใน Java "condition?stmnt1:stmnt2"คุณใช้ในการ

ในเชิงมุม 4.0 *ngIf="condition;then stmnt1 else stmnt2"คุณใช้

การแสดงออกของ ngif ค่าผลลัพธ์จะไม่เพียงแค่เป็นบูลีนจริงหรือเท็จ

หากการแสดงออกเป็นเพียงวัตถุก็ยังคงประเมินว่ามันเป็นความจริง

ถ้าวัตถุนั้นไม่ได้ถูกกำหนดหรือไม่มีอยู่ ngif จะประเมินว่ามันเป็นความเท็จ

การใช้งานทั่วไปคือถ้าโหลดวัตถุมีอยู่แล้วแสดงเนื้อหาของวัตถุนี้มิฉะนั้นแสดง "โหลด ....... "

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

ตัวอย่าง anthoer:

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

เทมเพลต ngif

เชิงมุม 4

ng-template

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


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

มีสองความเป็นไปได้ที่จะใช้ถ้าเงื่อนไขบนแท็ก HTML หรือเทมเพลต:

1. * ng ถ้าคำสั่งจาก CommonModule บนแท็ก HTML;
2. ถ้า-อื่น

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

ในเชิงมุม 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.comapponp.html

แหล่งที่มา:

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

คุณยังสามารถใช้ตัวดำเนินการเงื่อนไขแบบไตรภาคของ Javascript ได้หรือไม่ ในเชิงมุมเช่นนี้

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

หรือ

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

ฉันรู้ว่านี่ได้รับในขณะที่ แต่ต้องการที่จะเพิ่มถ้ามันช่วย วิธีที่ฉันไปด้วยคือมีสองธงในองค์ประกอบและสอง ngIfs สำหรับสองธงที่สอดคล้องกัน

มันง่ายและทำงานได้ดีกับวัสดุเนื่องจาก ng-template และวัสดุทำงานร่วมกันไม่ดี