Угловой материал программно добавляет вкладки

Question

Я хочу добавить или удалить вкладки из mat-tab-group в зависимости от события выбора. В самих вкладках содержатся динамические таблицы.

<mat-tab-group #tabs>
</mat-tab-group>

В начале пусто.

<mat-tab [label]="name">
  <mat-table #table [dataSource]="dataSource" matSort>

    <ng-container *ngFor="let column of tableConf.cols" [matColumnDef]="column.columnDef">
      <mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.header }}</mat-header-cell>
      <mat-cell *matCellDef="let row"> {{ column.cell(row) }}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="tableConf.columnsToDisplay"></mat-header-row>
    <mat-row *matRowDef="let row; columns: tableConf.columnsToDisplay"></mat-row>
  </mat-table>
</mat-tab>

Это таблица, которая по параметрам выбранного объекта получает динамические заголовки. Выбранная сущность имеет несколько сущностей, каждая из которых нуждается в своей таблице, которая должна отображаться на вкладках. Также есть переменная времени, которая влияет на все таблицы.

То, что я пытаюсь сделать, это добавить и удалить эти вкладки и добавить мои компоненты под ним, а также иметь ссылку на каждую из таблиц, чтобы я мог вызывать методы обновления в случае изменения временной переменной.

Answer 1

Ответ на вопрос, вероятно, не делать этого. Используйте модель и *ngFor, чтобы добавить вкладки и ввести в них данные, которые вы хотите.