Tôi đang sử dụng Angular và tôi muốn sử dụng *ngIf else(có sẵn từ phiên bản 4) trong ví dụ này:

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

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

Làm thế nào tôi có thể đạt được hành vi tương tự với ngIf else?

Góc 4 và 5 :

sử dụng else:

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

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

bạn cũng có thể sử dụng 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>

hoặc thenmột mình:

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

Bản giới thiệu :

Plunker

Chi tiết:

<ng-template>: là việc triển khai <template>thẻ riêng của Angular theo MDN :

Phần <template>tử HTML là một cơ chế để giữ nội dung phía máy khách không được hiển thị khi trang được tải nhưng sau đó có thể được khởi tạo trong thời gian chạy bằng JavaScript.

Trong Angular 4.xx Bạn có thể sử dụng ng If theo bốn cách để đạt được thủ tục đơn giản nếu khác:

1. Chỉ sử dụng nếu

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

2. Sử dụng If with Else (Vui lòng lưu ý đến templateName )

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

3. Sử dụng If with Then (Vui lòng thông báo cho templateName )

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

4. Sử dụng If với Then và Else

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

Mẹo: ngNếu đánh giá biểu thức và sau đó hiển thị mẫu sau đó hoặc mẫu khác ở vị trí của nó khi biểu thức là tương ứng hoặc sai. Điển hình là:

• thì mẫu là mẫu nội tuyến của ng If trừ khi bị ràng buộc với một giá trị khác.
• mẫu khác là trống trừ khi nó bị ràng buộc.

Để làm việc với có thể quan sát, đây là những gì tôi thường làm để hiển thị nếu mảng có thể quan sát bao gồm dữ liệu.

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

"bindEmail" nó sẽ kiểm tra email có sẵn hay không. nếu email tồn tại hơn Đăng xuất sẽ hiển thị nếu không Đăng nhập sẽ hiển thị

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

Bạn có thể sử dụng <ng-container>và <ng-template>để đạt được điều này

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

Bạn có thể tìm thấy bản demo Stackblitz Live bên dưới

bản thử trực tiếp

Hy vọng điều này sẽ giúp ... !!!

Đối với góc 9/8

Liên kết nguồn với các ví dụ

    export class AppComponent {
      isDone = true;
    }

1) * ngNếu

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

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

2) * ngNếu và khác

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

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

3) * ngNếu, sau đó và khác

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

Cú pháp cho ng If / Else

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

Sử dụng cú pháp Ng If / Else / Then

Để thêm mẫu sau đó chúng ta chỉ cần liên kết nó với một mẫu rõ ràng.

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

Có thể quan sát với ống Ng If và Async

Để biết thêm chi tiết

Chỉ cần thêm các bản cập nhật mới từ Angular 8.

1. Đối với trường hợp nếu với người khác, chúng ta có thể sử dụng ng If và ng IfElse .

<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. Đối với trường hợp nếu với sau đó, chúng ta có thể sử dụng ng If và ng IfThen .

<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. Đối với trường hợp nếu với sau đó và khác, chúng ta có thể sử dụng ng If , ng IfThen và ng IfElse .

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

Trong góc 4.0 if..else cú pháp khá giống với các toán tử có điều kiện trong Java.

Trong Java bạn sử dụng để "condition?stmnt1:stmnt2" .

Trong Angular 4.0 bạn sử dụng *ngIf="condition;then stmnt1 else stmnt2".

Biểu thức ngif kết quả giá trị sẽ không chỉ là boolean đúng hay sai

nếu biểu thức chỉ là một đối tượng, nó vẫn đánh giá nó là sự thật.

nếu đối tượng không được xác định hoặc không tồn tại, thì ngif sẽ đánh giá nó là giả.

Sử dụng phổ biến là nếu một đối tượng được tải, tồn tại, sau đó hiển thị nội dung của đối tượng này, nếu không thì hiển thị "đang tải .......".

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

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

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

một vi dụ khac:

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

ví dụ về anthoer:

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

mẫu ngif

ngif góc 4

ng-template

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


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

Có hai khả năng sử dụng nếu điều kiện trên thẻ hoặc mẫu HTML:

1. * ngNếu chỉ thị từ CommonModule, trên thẻ HTML;
2. nếu khác

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

Trong góc 4, 5 và 6

Chúng ta chỉ cần tạo một biến tham chiếu mẫu ^[2] và liên kết nó với điều kiện khác bên trong một lệnh * ng If

Các cú pháp có thể ^[1] là:

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

Nguồn:

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

Bạn cũng có thể sử dụng toán tử điều kiện ternary ngắn Javascript? trong góc như thế này:

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

hoặc là

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

Tôi biết điều này đã được một thời gian, nhưng muốn thêm nó nếu nó giúp. Cách tôi đã đi với là có hai cờ trong thành phần và hai ngIfs cho hai cờ tương ứng.

Nó đơn giản và hoạt động tốt với vật liệu như ng-template và vật liệu không hoạt động tốt với nhau.