* ngIf else if in template

在 *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，那么建议用什么样的方式来结构我的代码呢？

237402 次浏览
小开

你可以用:

<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 *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>
小开

你可以根据情况使用多种方法:

  1. 如果变量仅限于特定的 号码或 绳子，最好的方法是使用 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. Above not suitable for if elseif else codes and dynamic codes, you can use below code:

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

小开

这似乎是最干净的方法

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>

注意，当条件涉及不同的变量时，它是 像正确的 else if语句一样工作(一次只有1种情况为真)。在这种情况下，其他一些答案并不适用。

旁白: 天啊，棱角分明，这是一些非常丑陋的 else if模板代码..。

小开 

<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 已经在很多 我们一直使用的结构指令: ngIf、 ngFor 和 开关。

> 什么是角度 n- 模板

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

为了避免嵌套和 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>
小开

或者也许只是使用条件链与三元运算符。

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>

我更喜欢这个方法。

小开

如果使用 n- 容器，则不需要使用 * 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>
小开

我来了一个交叉这种情况 *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>

提交答案