Angular 如何设置一个材质角度表，在一个json响应中将键和值分成不同的数组？

我可以用这个创建一个材质表。但是，如果数据数组/数据响应有一个键值对，它就可以工作

我正在尝试使用以下数据集使用材质角度创建一个表。第一个数组将是表头，所有其他后续数组将是表行

Json响应

"data":[
      [
         "id",
         "name",
         "email",
         "purpose",
         "programme",
         "year",
         "language",
         "comments",
         "status"
      ],
      [
         "1",
         "Safa",
         "neerupeeru@mail.ee",
         "{motivation=null, skills=[], salary=null, status=null, statusdate=null}",
         "Software Engineering",
         "2016",
         "Estonian",
         "In need of correcting a dangling participle.",
         "null"
      ],
      [
         "2",
         "Jack",
         "jackie222@mail.ee",
         "{motivation=family, skills=[java], salary=null, status=Active, statusdate=null}",
         "Software Engineering",
         "2016",
         "Java",
         "In need of correcting a experience.",
         "Active"
      ],
      [
         "3",
         "Manny",
         "moonie123@mail.ee",
         "{motivation=hardworking, skills=[python], salary=null, status=pending, statusdate=null}",
         "Software Engineering",
         "2016",
         "Python",
         "to understand the workflow.",
         "pending"
      ],
   ]

组件。ts

  //subscribed to api and storing dataset into "rows" variable.
   this.rows = data.data;
   this.columnName = data.data[0]; //stores the column names (data[0]
   this.dataValues = data.data[1]; //do not want to store every other data indivually.

尝试HTML

<div class="example-container mat-elevation-z8" *ngIf="rows?.length>0;">
  <table mat-table [dataSource]="dataSource">

    <ng-container *ngFor="let col of rows[0]" [matColumnDef]="col">
      <th mat-header-cell  *matHeaderCellDef class ="headerPadding"> <h3><b>{{ col }}</b></h3></th>
      <td mat-cell *matCellDef="let element" class="tablePadding"> <b>{{element}} </b></td>
    </ng-container>   

    <tr mat-header-row *matHeaderRowDef="columnName; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: columnName; let row"></tr>
  </table>   

</div>

<table style="width:100%">
  <tr>
    <th *ngFor="let col of rows[0]">{{col}}</th>   
  </tr>
  <tr>
    <td *ngFor="let dataOne of rows[1]">{{dataOne }}</td>
  </tr>
 <tr>
    <td *ngFor="let dataTwo of rows[2]">{{dataTwo }}</td>
  </tr> 
</table>

{{col}}
{{element}}

通过上面的HTML，我能够正确地显示标题。但是，我无法将后续数据显示为行。因此数据。。。数据[2]。。。。数据[3]

非常感谢您的任何想法/建议

尝试2个HTML

<div class="example-container mat-elevation-z8" *ngIf="rows?.length>0;">
  <table mat-table [dataSource]="dataSource">

    <ng-container *ngFor="let col of rows[0]" [matColumnDef]="col">
      <th mat-header-cell  *matHeaderCellDef class ="headerPadding"> <h3><b>{{ col }}</b></h3></th>
      <td mat-cell *matCellDef="let element" class="tablePadding"> <b>{{element}} </b></td>
    </ng-container>   

    <tr mat-header-row *matHeaderRowDef="columnName; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: columnName; let row"></tr>
  </table>   

</div>

<table style="width:100%">
  <tr>
    <th *ngFor="let col of rows[0]">{{col}}</th>   
  </tr>
  <tr>
    <td *ngFor="let dataOne of rows[1]">{{dataOne }}</td>
  </tr>
 <tr>
    <td *ngFor="let dataTwo of rows[2]">{{dataTwo }}</td>
  </tr> 
</table>

{{col}}
{{dataOne}}
{{dataTwo}

---

这样，我就能够正确地显示标题和数据。然而，这不是动态的。如果数据响应超过4个数据。此逻辑将不会显示这些值。

通过这种方式，您可以迭代数据源

<table mat-table [dataSource]="dataValues" class="mat-elevation-z8">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Columns loop -->
  <ng-container *ngFor="let col of columnName; let i = index"  matColumnDef="{{col}}">
    <th mat-header-cell *matHeaderCellDef> {{col}} </th>
    <td mat-cell *matCellDef="let element"> {{element[i]}} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="columnName"></tr>
  <tr mat-row *matRowDef="let row; columns: columnName;"></tr>
</table>

---

另一种解决方案是按照@JSmith的说法转换数据，但是，如果数组太大，转换数据可能会导致性能问题。

Hello Lissettdm。您在编辑之前向我展示的最初示例效果良好。但是，当使用元素[i]时。它还将标题显示为表行。stack blitz提供了一个使用密钥对值创建表的示例。在这里，您可以看到一个工作示例，您最初的回答回答了我的问题。将组件中的切片（1）用于数据源。解决了我的问题。是的，忽略第一项，this.dataValues=ELEMENT\u DATA.slice（1）；