angular - Angular Material 以编程方式添加选项卡

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>

这是一个表格，在所选实体的参数上获取动态标题。被选中的实体有几个子实体，每个子实体都需要自己的表格，这些表格应该显示在选项卡中。还有一个影响所有表格的时间变量。

我尝试做的是添加和删除这些选项卡，并在其下添加我的组件，并且还可以引用每个表，因此如果时间变量发生变化，我可以调用更新方法。

标签： angularmaterial-design

Answer 1

这个问题的答案可能是不要这样做。使用模型并*ngFor添加选项卡并向它们注入您想要的数据。