如何在ngFor中使用ngSwitchCase？

Question

来自我的代码中的示例。

tabs: object = [
  { key: 'tab1', value: 'tab1' },
  { key: 'tab2', value: 'tab2' },
  { key: 'tab3', value: 'tab3' },
];

<div [ngSwitch]="my_tab">
  <div *ngFor="let tab of tabs" *ngSwitchCase="'{{ tab.key }}'">
    {{ tab.value }}
  </div>
</div>

我的代码总是出错。怎么做？

Answer 1

您不能在同一HTML标记上放置两个结构指令。如果您希望将切换条件应用于每个<div [ngSwitch]="my_tab"> <ng-container *ngFor="let tab of tabs"> <div *ngSwitchCase="tab.key"> {{ tab.value }} </div> </ng-container> </div> 循环，则应编写如下HTML代码：

{{1}}

此外ng-container允许添加结构条件而不会干扰页面的CSS样式。