angular - 如何在 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 样式。