角度4 * ng如果其他？-Java 学习之路

如何在* ngIf语句中包含多个案例？我已经习惯了Vue或Angular 1有if，else if和else，但似乎Angular 4只有一个真（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中都不受支持，那么建议用这样的条件构造代码的方法是什么？

4 回答

另一种选择是筑巢条件

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

回复于 2024-04-27T09:49:18+08:00

你可以使用：

<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

回复于 2024-04-27T09:49:18+08:00

这似乎是最干净的方法

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>

注意，当条件涉及不同的变量时，它是 works like a proper else if statement should （一次只有1个案例是真的） . 在这种情况下，其他一些答案无效 .

抛开：天哪，这是一些非常难看的模板代码......

回复于 2024-04-27T09:49:18+08:00

您可以使用基于sitaution的多种方式：

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

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

回复于 2024-04-27T09:49:18+08:00

角度4 * ng如果其他？

4 回答

相关问题