angular - 有什么方法可以在 Angular Material 表中动态添加列？

Question

我在使用 Angular Material 表动态创建表时遇到问题。由于该表依赖于一个接口(interface)，所以我有固定数量的列。我想要的是根据服务器的响应有一个动态表。有什么办法可以动态创建界面之类的吗？因为应用程序的设计方式有时有 2 列，有时有 3 列，依此类推，具体取决于数组的大小。我的界面目前看起来像

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

有了这个界面，我有 3 列。最少有 3 列，但根据数据的不同，可能会超过 3 列。我无法做到这一点，如有任何帮助，我们将不胜感激。

Answer 1

执行此操作的最简单方法是将所有可能的列包含在一个数组 (definedColumns) 中，并针对标题和单元格定义对其进行迭代。

然后对于您想要有条件地显示的列，您可以通过一个单独的数组来控制显示哪些列，该数组包含您要实际显示的列的字符串列表 (columnsToDisplay)。只需在此列表中添加和删除 columnId，就会导致表更新为适当的列。

<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>

有 Angular Material 网站上给出了这方面的一个实例，请参阅“表格动态更改显示的列"在他们的示例页面上 - 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了解更多详情。