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

Question

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

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

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

Answer 1

最简单的方法是将所有可能的列包括在数组（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>

在角材网站上有一个实时示例，请参阅“表格动态更改显示的列 ”在其示例页面上-

---

注意：对于更高级的示例，例如，如果您需要为您的单元格和标头定义传递TemplateRef，则可能需要检出Angular Material的CDK。

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

Answer 2

我不是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);
});