html - *ngIf else if 在模板中

Question

如何在 *ngIf 语句中包含多个 case？我习惯于 Vue 或 Angular 1 有一个 if、else if 和 else，但似乎 Angular 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，这感觉就像一个 hack:

<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 中不受支持，那么在这样的条件下，推荐的结构代码的方法是什么？

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>