Angular 5 Material-UI 动态垫 Table 来自 json 数据

Question

我正在打一个 api，它可以 return 不同的 JSON，每个都意味着不同的 table。

这是我 compenent.html

中的通用 HTML

    <table mat-table [dataSource] = "cols" class="mat-elevation-z8">
            <ng-container *ngFor="let col of cols" [matColumnDef]="col">
                    <th mat-header-cell *matHeaderCellDef> {{ col }} </th>
                    <td mat-cell *matCellDef="let element"> {{ element[col] }} </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

我在组件中获取的数据class

getData(){
  this.requestService.getTableData().subscribe(
    data => {
      this.arrData = data as string []; 
       console.log(this.arrData['requestType']);
    },
    error => {
      console.log (error.message);
    }
  )
  this.cols = JSON.parse(this.arrData['responsePayload']);
}

我终于得到的 JSON 数据看起来像这样

[
  {
    "Company": "Alfreds Futterkiste",
    "Contact": "Maria Anders",
    "Country": "Germany"
  },
....
]

this.cols 是我的 mat-table 数据源，它正确填充为包含 6 个条目的数组。我需要用它做一个 mat-table，但我一直收到这个错误

requestHandler.html:6 ERROR TypeError: name.replace is not a function at MatColumnDef.set name [as name] (table.js:175) at updateProp (core.js:32188)

在

       <ng-container *ngFor="let col of cols" [matColumnDef]="col">

有人能给我指出正确的方向/告诉我哪里出错了吗？

此外，如果问题中有什么不清楚的地方，请告诉我，我会再次尝试解释。

注意：我相信有一个解决方案可以为我得到的 JSON 数据创建一个接口，但我最终会为每种类型的 [=] 创建一个稍微静态的 HTML 49=]。我想保持通用。类似于动态接口的东西（我认为这是不可能的。）This 虽然有点酷，但我需要能够在运行时做到这一点。

Answer 1

在您的 .ts 文件中导入 MatTableDataSource

import {MatTableDataSource} from "@angular/material";

定义列如下

cols: MatTableDataSource<Any>;

并且您必须将数组作为 MatTableDataSource

传递

 this.cols = new MatTableDataSource(this.arrData['responsePayload']);

你也可以使用按行的方法

 <table mat-table [dataSource] = "cols" class="mat-elevation-z8">

       <!-- Company Column -->
       <ng-container matColumnDef="company">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Company </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.Company}} </mat-cell>
       </ng-container>

       <!-- Contact Column -->
       <ng-container matColumnDef="contact">
           <mat-header-cell *matHeaderCellDef mat-sort-header> Contact </mat-header-cell>
           <mat-cell *matCellDef="let row" > {{row.Contact}} </mat-cell>
        </ng-container>

       <!-- Country Column -->
       <ng-container matColumnDef="country">
           <mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.Country}} </mat-cell>
       </ng-container>

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

希望这会有所帮助..！

Angular 5 Material-UI 动态垫 Table 来自 json 数据

Angular 5 Material-UI dynamic Mat Table from json data

typescript

angular5

mat-table