Angular 5 - Multi Mat Mats использует один и тот же экземпляр дочернего компонента - PullRequest
Новая
       20

Angular 5 - Multi Mat Mats использует один и тот же экземпляр дочернего компонента

0 голосов
/ 12 июня 2018

ниже - мой 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.Но при загрузке данных каждая вкладка загружает одни и те же данные и не делает различий между вкладками.Любая помощь приветствуется.Когда я удаляю вкладки часть компонентов по отдельности работает нормально.Есть ли способ создавать новые экземпляры app-build-component и app-view-component, каждый раз, когда выполняется ngFor, и связывать его с текущим выполняемым экземпляром Mat-tab?

1 Ответ

0 голосов
/ 19 июня 2018

Вы, похоже, пропускаете некоторые цитаты из вашего шаблона:

app-view-component id={{tabId}}_view>

должно читаться как

<app-view-component id="{{tabId}}_view">

...