Как сделать ngSwitchCase в ngFor?

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 страницы.