如何将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&nbsp; {&nbsp; name = 'Angular 5';&nbsp; displayedColumns = ['data', 'a11', 'a12', 'a13', 'a14', 'a15'];&nbsp; dataSource: any;&nbsp; inputData = [];&nbsp; constructor() {&nbsp; &nbsp; SOURCE_DATA.forEach(data => {&nbsp; &nbsp; &nbsp; this.inputData.push(&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: data['n1'] + ', ' + data['n2'],&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; A11: data['A1']['A11']['t'],&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; A12: data['A1']['A12']['t'] || data['A1']['A12']['t1'],&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; A13: data['A1']['A13']['t'],&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; A14: data['A1']['A14']['t'],&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; A15: data['A1']['A15']['t']&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; });&nbsp; &nbsp; this.dataSource = new MatTableDataSource<any>(this.inputData);&nbsp; }}模板<ng-container *ngIf="dataSource">&nbsp; <div class="example-container mat-elevation-z8">&nbsp; &nbsp; <mat-table #table [dataSource]="dataSource">&nbsp; &nbsp; &nbsp; <ng-container matColumnDef="data">&nbsp; &nbsp; &nbsp; &nbsp; <mat-header-cell *matHeaderCellDef> Data </mat-header-cell>&nbsp; &nbsp; &nbsp; &nbsp; <mat-cell *matCellDef="let a"> {{a.data}} </mat-cell>&nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; &nbsp; <ng-container matColumnDef="a11">&nbsp; &nbsp; &nbsp; &nbsp; <mat-header-cell *matHeaderCellDef> A11 </mat-header-cell>&nbsp; &nbsp; &nbsp; &nbsp; <mat-cell *matCellDef="let a"> {{a.A11}} </mat-cell>&nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; &nbsp; <ng-container matColumnDef="a12">&nbsp; &nbsp; &nbsp; &nbsp; <mat-header-cell *matHeaderCellDef> A12 </mat-header-cell>&nbsp; &nbsp; &nbsp; &nbsp; <mat-cell *matCellDef="let a"> {{a.A12}} </mat-cell>&nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; &nbsp; <ng-container matColumnDef="a13">&nbsp; &nbsp; &nbsp; &nbsp; <mat-header-cell *matHeaderCellDef> A13 </mat-header-cell>&nbsp; &nbsp; &nbsp; &nbsp; <mat-cell *matCellDef="let a"> {{a.A13}} </mat-cell>&nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; &nbsp; <ng-container matColumnDef="a14">&nbsp; &nbsp; &nbsp; &nbsp; <mat-header-cell *matHeaderCellDef> A14 </mat-header-cell>&nbsp; &nbsp; &nbsp; &nbsp; <mat-cell *matCellDef="let a"> {{a.A14}} </mat-cell>&nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; &nbsp; <ng-container matColumnDef="a15">&nbsp; &nbsp; &nbsp; &nbsp; <mat-header-cell *matHeaderCellDef> A15 </mat-header-cell>&nbsp; &nbsp; &nbsp; &nbsp; <mat-cell *matCellDef="let a"> {{a.A15}} </mat-cell>&nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; &nbsp; <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>&nbsp; &nbsp; &nbsp; <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>&nbsp; &nbsp; </mat-table>&nbsp; </div></ng-container>