时间戳

首页 > 解决方案 > 在 Angular 中动态生成选项卡和表格

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

问题描述

我正在尝试动态构建每个选项卡下的选项卡和表格。我为动态表参考了这个项目的动态表。

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

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

在此处输入图像描述

标签： angularangular-materialtabsmat-table

解决方案

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

在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

推荐阅读