如何在 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 标记上。如果您希望将您的开关条件应用于每个 ngFor 循环，您应该编写如下 HTML 代码：

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

ng-container 还允许添加结构条件而不影响页面的 CSS 样式。