angular - 如何在 ngFor 中使用 ngSwitchCase？

Question

来 self 的代码中的示例。

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 样式的情况下添加结构条件。