如果在模板中

Question

如何在一个*ngIf语句中包含多个案例？我习惯于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，这感觉像是黑客攻击：

<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

这似乎是最干净的方式

if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

在模板中：

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

请注意，当条件涉及不同的变量时（一次只有一个情况是正确的），它的工作方式就像一个正确的。在这种情况下，其他一些答案不正确。

旁白：天哪，棱角分明，这是一些非常丑陋的，否则如果模板代码...

Answer 2

你可以使用：

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

除非ng容器部分对你的设计很重要。

这是一个Plunker

Answer 3

另一种选择是嵌套条件

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