* ng如果在模板中，否则

我如何在一个*ngIf陈述中处理多个案件？我已经习惯的Vue或角1与具有if，else if和else，但似乎角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 4中不支持我从Angular 1和Vue习惯的很多语法，那么采用这种条件构造代码的推荐方法是什么？

另一种选择是嵌套条件

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

您可以使用：

<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容器部分对您的设计很重要。

这是一个笨蛋

这似乎是最干净的方法

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>

请注意，当条件涉及不同的变量时（一次只有1种情况为真），它就像一个正确的else if语句一样工作。在这种情况下，其他一些答案将无法正常工作。

撇开：天哪，那是一些非常丑陋的else if模板代码...

您可以根据情况使用多种方式：

1. 如果您将Variable限制为特定的Number或String，则最好的方法是使用ngSwitch或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. 上面的代码不适合其他代码和动态代码，可以使用下面的代码：

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

注意：您可以选择任何格式，但是请注意每个代码都有自己的问题

为了避免嵌套和ngSwitch，还存在这种可能性，它利用了Java中逻辑运算符的工作方式：

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

或者也许只使用带三元运算符的条件链。if … else if … else if … else链。

https://developer.mozilla.org/zh-CN/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>

我更喜欢这种方式。

<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已经在幕后使用了ng-template：ngIf，ngFor和ngSwitch。

> Angular中的ng-template是什么

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

您还可以使用这个古老的技巧将复杂的if / then / else块转换为稍微清晰的switch语句：

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