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