以下是我的HTML
<mat-tab-group class="tab-content" [selectedIndex]="activeTabIndex" (selectedIndexChange)="changeActiveTab($event)">
<div *ngFor="let tabId of tabCollection; let i = index;">
<mat-tab class="tab-content">
<ng-template mat-tab-label>
Query {{ tabId }}
<button mat-icon-button *ngIf="possibleToDestroyTab()" (click)="closeTab(i)">
<mat-icon>close</mat-icon>
</button>
</ng-template>
<div class="tab-content">
<app-build-component [myid]="tabId"></app-build-component>
<app-view-component id={{tabId}}_view></app-view-component>
</div>
</mat-tab>
</div>
<mat-tab *ngIf="possibleToCreateTab()" disabled>
<ng-template mat-tab-label>
<button mat-icon-button (click)="addTab()">
<mat-icon>add_circle</mat-icon>
</button>
</ng-template>
</mat-tab>
对于每个选项卡，我动态创建app-build-component和app-view-component . 但是在加载数据时，每个选项卡都会加载相同的数据，而不会区分选项卡 . 任何帮助表示赞赏 . 当我删除Tabs部分时，组件单独工作正常 . 有没有办法创建app-build-component和app-view-component的新实例，每次执行ngFor并将其绑定到正在执行的当前Mat-tab实例？
1 回答
您似乎错过了模板中的一些引号：
app-view-component id={{tabId}}_view>应该读
<app-view-component id="{{tabId}}_view">