有什么方法可以在 Angular 材质表中动态添加列？答案

【问题标题】：Any way to dynamically add columns in Angular material table?有什么方法可以在 Angular 材质表中动态添加列？
【发布时间】：2018-05-21 00:56:11
【问题描述】：

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

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

有了这个界面，我有 3 列。至少有 3 列，但根据数据可能超过 3 列。我无法做到这一点，我们将不胜感激。

【问题讨论】：

你不能动态接口，请参考这个答案stackoverflow.com/questions/49304865/…

标签： angular typescript interface angular-material

【解决方案1】：

我并没有 100% 使用 angular-material 表，但这将允许您在服务器调用后在 Data 对象上创建动态属性。

这是一个 javascript 示例，可以与您的 typescript 实现互换，其中 promise 是您的 http 调用。

var obj = { };
var promise = new Promise(resolve => resolve(['one', 'two', 'three']));

promise.then(data => {
  for (let column of data){
    obj[column] = 'data -> ' + column;
  }
  
  console.log(obj);
});

【讨论】：

您如何将值与接口关联？有没有一种方法可以在没有界面的情况下使用 mat 表？

【解决方案2】：

执行此操作的最简单方法是将所有可能的列包含在一个数组 (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>

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

【讨论】：