Question

我从服务器输入了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，但是它变得非常凌乱，无法正常工作

Answer 1

一旦从服务器获取数据，请检查array是否为空，然后从array中获取第一个对象，并通过对象键创建一列array。

这是在您的componenet中

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

然后在您的html中，您将遍历displayColumns

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

如何从JSON字符串创建垫角表？

1 个答案: