我怎么会在*ngIf份声明中有多个 case ?我已经习惯了Vue或Angular 1有ifelse ifelse,但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中似乎都不受支持,那么,用这样的条件构造代码的推荐方法是什么呢?

推荐答案

另一种 Select 是嵌套条件

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

Angular相关问答推荐

Angular 形式验证:在空和不匹配的密码上显示错误

HTTP Get请求未发送到提供的URL

在forkjoin中使用NGXS状态数据

Angular 16未知参数:独立

带有两个注入服务的函数式解析器(Angular 15)

如何在HTML外部项目中使用Web组件(以17角创建)

Rxjs重置执行后的可观察延迟并重新调度Angular

如何使用ChangeDetectionStrategy.OnPush?

为什么在回调完成之前,可观察对象会返回?

Angular KendoGrid RowReorderable,drop不适用于新添加的行

Angular 不使用NgRx的简单CRUD应用程序

Angular JWT Token 被添加到lazyUpdate 而不是 HttpHeaders 中的标头

Angular2 测试 - 按 ID 获取元素

如何在angular material中使用输入类型文件

Angular 5 Mat-grid 列表响应式

如何处理解析器中的错误

未绑定断点 - VS Code | Chrome | Angular

如何设置背景 colored颜色 IONIC 4

在angular-cli中创建模块时生成路由模块

ngClass 中的多个条件 - Angular 4