* ngNếu khác nếu trong mẫu

Làm thế nào tôi có nhiều trường hợp trong một *ngIftuyên bố? Tôi đang sử dụng để Vue hoặc góc 1 với việc có một if, else ifvà else, nhưng nó có vẻ như góc 4 chỉ có một true( if) và false( else) điều kiện.

Theo tài liệu, tôi chỉ có thể làm:

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

Nhưng tôi muốn có nhiều điều kiện (đại loại như):

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

Nhưng cuối cùng tôi phải sử dụng ngSwitch, cảm giác giống như một vụ hack:

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

Ngoài ra, có vẻ như rất nhiều cú pháp tôi đã quen thuộc từ Angular 1 và Vue không được hỗ trợ trong Angular 4, vì vậy đâu sẽ là cách được khuyến nghị để cấu trúc mã của tôi với các điều kiện như thế này?

Một giải pháp thay thế khác là lồng ghép các điều kiện

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

Bạn chỉ có thể sử dụng:

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

Tôi cho là trừ khi phần ng-container quan trọng đối với thiết kế của bạn.

Đây là một Plunker

Đây dường như là cách sạch sẽ nhất để làm

if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

trong mẫu:

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

Lưu ý rằng nó hoạt động giống như một else ifcâu lệnh thích hợp khi các điều kiện liên quan đến các biến khác nhau (mỗi lần chỉ có 1 trường hợp đúng). Một số câu trả lời khác không hoạt động đúng trong trường hợp như vậy.

sang một bên: gosh góc cạnh, đó là một số else ifmã mẫu thực sự xấu xí ...

Bạn có thể sử dụng nhiều cách dựa trên tình trạng cẩn thận:

1. Nếu Biến của bạn bị giới hạn ở Số hoặc Chuỗi cụ thể , cách tốt nhất là sử dụng ngSwitch hoặc 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. Ở trên không phù hợp với mã if elseif khác và mã động, bạn có thể sử dụng mã dưới đây:

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

Lưu ý: Bạn có thể chọn bất kỳ định dạng nào, nhưng hãy lưu ý rằng mọi mã đều có vấn đề riêng

Để tránh lồng nhau và ngSwitch, cũng có khả năng này, điều này thúc đẩy cách các toán tử logic hoạt động trong Javascript:

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

Hoặc có thể chỉ sử dụng chuỗi có điều kiện với toán tử bậc ba. if … else if … else if … elsechuỗi.

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>

Tôi thích aproach này hơn.

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

Angular đã sử dụng ng-template trong nhiều chỉ thị cấu trúc mà chúng tôi sử dụng mọi lúc: ngIf, ngFor và ngSwitch.

> Ng-template trong Angular là gì

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

Bạn cũng có thể sử dụng thủ thuật cũ này để chuyển đổi các khối if / then / else phức tạp thành một câu lệnh switch gọn gàng hơn một chút:

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