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

Question

我正在尝试将http respone打印到垫子表。我无法将数据格式化为数组并将其设置为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>