如何在 ngFor 中使用 ngSwitchCase?
How to ngSwitchCase in ngFor?
来自我的代码中的示例。
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>
我总是收到此代码的错误。如何做到这一点?
您不能将两个结构指令放在同一个 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 样式。
来自我的代码中的示例。
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>
我总是收到此代码的错误。如何做到这一点?
您不能将两个结构指令放在同一个 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 样式。