在Angular材质表中动态添加列的任何方法？

发布时间：2020-12-17 17:34:04 所属栏目：安全来源：网络整理

导读：我在使用Angular Material表动态创建表时遇到问题.由于表依赖于接口,因此我有固定数量的列.我想要的是根据服务器的响应获得动态表.有没有办法动态创建界面或什么？因为应用程序的设计方式有时会有2列,有时会有3列,依此类推,具体取决于数组的大小. 我的界面目

我在使用Angular Material表动态创建表时遇到问题.由于表依赖于接口,因此我有固定数量的列.我想要的是根据服务器的响应获得动态表.有没有办法动态创建界面或什么？因为应用程序的设计方式有时会有2列,有时会有3列,依此类推,具体取决于数组的大小.
我的界面目前看起来像

export interface Data{
    file:any,typea:any,typeb:any
}

有了这个界面,我有3列.至少有3列,但根据数据可能超过3.我无法实现这一点,任何帮助将不胜感激.

解决方法

最简单的方法是在数组中包含所有可能的列(definedColumns),并对其进行迭代以获得标题和列表.细胞定义.

然后,对于要有条件显示的列,可以通过使用包含要实际显示的列的字符串列表(columnsToDisplay)的单独数组来控制显示的列.只需在此列表中添加和删除columnIds,即可使用适当的列更新表.

<table mat-table [dataSource]="data" class="mat-elevation-z8">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

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

在角度材料网站上有一个这样的实例,请参阅“表格动态更改显示的列
“在他们的示例页面上 – https://material.angular.io/components/table/examples

注意：对于更高级的示例,例如,如果需要为单元格和标题定义传递TemplateRef,则可能需要查看Angular Material的CDK.

您可以使用Angular的CDK API动态添加和删除表中的列.如果将#table添加到mat-table元素,那么您可以让组件将其用作@ViewChild.然后你可以使用this.table.addColumnDef并传递你的新列.有关详细信息,请参见https://material.angular.io/cdk/table/api#CdkColumnDef.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!