如何将 json 对象打印到 Mat 表？

Question

我正在尝试将 http 响应打印到垫表。我无法将数据格式化为数组并将其设置为 mat-datasource。有人可以指导我吗？

[
{
"n1":"abcd",
"n2":"abcde",
"A1":
{
"A11":{"t":b1},
"A12":{"t1":b2},
"A13":{"t":b3},
"A14":{"t":b4},
"A15":{"t":b5}}
},
{
"n2":"bcde",
"n2":"bcdef",
"A1":
{
"A11":{"t":b1,"t1":b2},
"A12":{"t":b3},
"A13":{"t":b4},
"A14":{"t":b5},
"A15":{"t":b6}
}
}
}
]

垫表应该是这样的。

---------------------------------------------------
| data   | A11  | A12     |A13   | A14   | A15     |
---------------------------------------------------
| n1,n2  |  t   |     t   |   t  |    t  |   t     |
---------------------------------------------------
| n1,n2  |  t   |     t   |   t  |    t  |   t     |
---------------------------------------------------

我在下面尝试过，但无法将子值（A11、A12、A13、A14、A15）设置为数组

ngOnInit() {
this.gService.getlist().subscribe(
      (res: any[]) => {
        let GL = new Array();
        res.forEach(gl => {
          GL.push({
            n1: gl.n1,
            n2: gl.n2,
            A1: gl.A1,
// unable to read other json values part of A1.

          })
        })
this.datasource.data = GL;
}

````

Answer 1

我不确定您是如何定义模板的。但以下似乎工作。请注意，我使用的是括号表示法。理论上它应该也可以使用点符号，但是 TS Lint 可能会抛出一些错误。

控制器

export class AppComponent  {
  name = 'Angular 5';
  displayedColumns = ['data', 'a11', 'a12', 'a13', 'a14', 'a15'];
  dataSource: any;
  inputData = [];

  constructor() {
    SOURCE_DATA.forEach(data => {
      this.inputData.push(
        {
          data: data['n1'] + ', ' + data['n2'], 
          A11: data['A1']['A11']['t'], 
          A12: data['A1']['A12']['t'] || data['A1']['A12']['t1'], 
          A13: data['A1']['A13']['t'], 
          A14: data['A1']['A14']['t'], 
          A15: data['A1']['A15']['t']
        }
      );
    });
    this.dataSource = new MatTableDataSource<any>(this.inputData);
  }
}

模板

<ng-container *ngIf="dataSource">
  <div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource">

      <ng-container matColumnDef="data">
        <mat-header-cell *matHeaderCellDef> Data </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.data}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="a11">
        <mat-header-cell *matHeaderCellDef> A11 </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.A11}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="a12">
        <mat-header-cell *matHeaderCellDef> A12 </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.A12}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="a13">
        <mat-header-cell *matHeaderCellDef> A13 </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.A13}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="a14">
        <mat-header-cell *matHeaderCellDef> A14 </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.A14}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="a15">
        <mat-header-cell *matHeaderCellDef> A15 </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.A15}} </mat-cell>
      </ng-container>

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

工作示例：Stackblitz