在 Angular 中动态生成选项卡和表格

Question

我正在尝试动态构建选项卡和每个选项卡下的 table。我为动态 table.

提到了这个项目

这是我的仓库 - https://stackblitz.com/edit/angular-9-material-starter-r6di58?file=src%2Fapp%2Ftable%2Ftable.component.ts

我不确定我将 table 数据作为异步流传递的方式是否有效。在我的程序中，我有两个选项卡——员工、经理，每个选项卡下面都有一个 table。每个 table 都有自己的排序器、分页和搜索。搜索词已传递到组件。

Answer 1

问题的根源在于您没有将正确的输入传递给组件。

在 tab.component.html 中，您可以使用 async 管道从您的 app-table 组件期望的可观察对象中获取列和行数组。然后，使用选项卡名称引用每个部分。您可以改用索引或枚举，但您的结构需要支持它。

<ng-container *ngIf="{row: (rowData$ | async), col: (colData$ | async)} as data">
     <app-table [row]="data.row[tab.tabName]" [columns]="data.col[tab.tabName]" [search]='filters'>
     </app-table>
</ng-container>

此外，在 table.component.html 中，将 *ngIf="dataSource" 添加到 mat-table 标记将有助于清除在设置 dataSource 之前抛出的错误。

我有一些你的例子在这里工作：stackblitz

在 Angular 中动态生成选项卡和表格

Dynamically generate tabs and tables in Angular

tabs

angular-material

angular

mat-table