如何从 JSON 字符串创建一个垫角表？答案

【问题标题】：How to create a mat angular table from JSON string?如何从 JSON 字符串创建一个垫角表？
【发布时间】：2019-06-28 20:29:26
【问题描述】：

我有一个来自服务器的输入 JSON 字符串。它可以有任意数量的列。我希望能够从这个 JSON 创建 MAT 角度表。这是我的测试环境 https://stackblitz.com/edit/angular-wcjorj

目前，我正在对html 页面中的所有列名进行硬编码。对于每一列，我使用ng-container，如下所示：

 <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
      <td mat-cell *matCellDef="let row"> {{row.id}} </td>
    </ng-container>

但是对于任何其他 JSON 数据表，我需要能够动态地执行此操作。如何动态创建该 html 表？我尝试使用ngFor，但是它变得非常混乱，我无法让它工作

【问题讨论】：

是的，可以选择使用 ngFor，您也可以从函数中获取 ngFor 的源代码。

标签： angular

【解决方案1】：

从服务器获取数据后，检查数组是否不为空，然后从数组中取出第一个对象并从对象键创建列数组。

这是在您的组件中

if (this.inputData.length > 1) {
this.displayedColumns: string[] = Object.keys(this.inputData[0]);
}

然后在您的 html 中，您将循环显示列

<ng-container matColumnDef="{{col}}" *ngFor="let col of displayedColumns ">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{col}}
      </th>
      <td mat-cell *matCellDef="let element" >
         {{element[col]}}
      </td>
    </ng-container>

【讨论】：