*ngIf else if 在模板中

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

您可以只使用：

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

这是一个Plunker

Answer 2

另一种方法是嵌套条件

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

Answer 3

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

如果您的变量仅限于特定的 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>

以上不适合if elseif else代码和动态代码，可以使用下面的代码：

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

Note: You can choose any format, but notice every code has own problems

Answer 4

这似乎是最简洁的方法

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 语句应该 相同。在这种情况下，其他一些答案并不适用。

旁白：天哪 angular，那是一些非常难看的 else if 模板代码...

Answer 5

<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 is already using ng-template under the hood in many of the structural directives that we use all the time: ngIf, ngFor and ngSwitch.

> What is ng-template in Angular

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

Answer 6

您还可以使用这个老技巧将复杂的 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>

Answer 7

为了避免嵌套和ngSwitch，也有这种可能，它利用了逻辑运算符在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>

Answer 8

或者可能只使用带有三元运算符的条件链。 if … else if … else if … else链.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator#Conditional_chains

<ng-container [ngTemplateOutlet]="isFirst ? first : isSecond ? second : third"></ng-container>

<ng-template #first></ng-template>
<ng-template #second></ng-template>
<ng-template #third></ng-template>

我更喜欢这种方法。

Answer 9

如果你使用 ng-container，你不需要使用 *ngIf

<ng-container [ngTemplateOutlet]="myTemplate === 'first' ? first : myTemplate === 
   'second' ? second : third"></ng-container>

  <ng-template #first>first</ng-template>
  <ng-template #second>second</ng-template>
  <ng-template #third>third</ng-template>

Answer 10

我遇到过这种情况*ngIf elseIf else，我用ng-template解决了，希望下面的片段可以简要描述，

我有一个名为“NIC”的表单控件，需要在表单控件无效时一次显示一条错误消息。

form: FormGroup = new FormGroup({
    NIC: new FormControl('', [Validators.required, Validators.minLength(10), Validators.maxLength(10), Validators.pattern("^[0-9]*$")])
  });

模板

<mat-form-field appearance="standard">
    <mat-label>NIC Number</mat-label>
    <input matInput placeholder="Enter NIC no" formControlName="NIC">
    <mat-error *ngIf="form.controls['NIC'].errors?.required; else minvalue">This field is mandatory.
    </mat-error>

    <ng-template #minvalue>
        <mat-error *ngIf="form.controls['NIC'].errors?.minlength; else maxvalue">Minimum 10 charactors
            needed.
        </mat-error>
    </ng-template>

    <ng-template #maxvalue>
        <mat-error *ngIf="form.controls['NIC'].errors?.maxLength; else numericonly">Maximum 10
            charactors allowed.
        </mat-error>
    </ng-template>

    <ng-template #numericonly>
        <mat-error *ngIf="form.controls['NIC'].errors?.pattern">
            Numeric characters only.
        </mat-error>
    </ng-template>

</mat-form-field>

*ngIf else if 在模板中

*ngIf else if in template

html

templates

angular-ng-if

angular