Angular [ngIf]、[ngIfElse] 和 [ngIfElseIf]

Question

我现在有这个代码：

<ng-container *ngIf="someCondition">
    <ng-template [ngIf]="cd.typedType === 'first'" [ngIfElse]="Second">
      <div class="row">
      first
      </div>
    </ng-template>
    <ng-template #Second>
      <div class="row">
      second
      </div>
    </ng-template>
</ng-container>

它正在运行。有没有办法使用 else if？创建类似的东西：

<ng-container *ngIf="someCondition">
    <ng-template [ngIf]="cd.typedType === 'first'" [ngIfElseIf]="cd.typedType === 'Second'" [ngIfElse]="cd.typedType === 'Third'>
      <div class="row">
      first
      </div>
    </ng-template>
    <ng-template #Second>
      <div class="row">
      second
      </div>
    </ng-template>
    <ng-template #Third>
      <div class="row">
      third
      </div>
    </ng-template>
</ng-container>

所以要使用基本 if/elseif/else 在 3 个不同的模板之间移动？

Answer 1

ngSwitch 似乎是您正在寻找的答案！

<ng-container [ngSwitch]="someCondition">
    <ng-template *ngSwitchCase="'first'">
      <div class="row">
      first
      </div>
    </ng-template>
    <ng-template *ngSwitchCase="'second'">
      <div class="row">
      second
      </div>
    </ng-template>
    <ng-template *ngSwitchCase="'third'">
      <div class="row">
      third
      </div>
    </ng-template>
</ng-container>

在此处获取更多信息： angular.io/api/common/NgSwitchCase

Angular [ngIf]、[ngIfElse] 和 [ngIfElseIf]

Angular [ngIf], [ngIfElse] and [ngIfElseIf]

html

css

angular

typescript

ng-template