第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

如何將json對象打印到Mat表？

如何將json對象打印到Mat表？

慕絲7291255 2022-09-02 19:44:59
我正在嘗試將http respone打印到墊子表。我無法將數(shù)據(jù)格式化為數(shù)組并將其設(shè)置為mat-datasource。有人可以請指導(dǎo)我。[{"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}}}}]墊子表應(yīng)該看起來像這樣。---------------------------------------------------| data   | A11  | A12     |A13   | A14   | A15     |---------------------------------------------------| n1,n2  |  t   |     t   |   t  |    t  |   t     |---------------------------------------------------| n1,n2  |  t   |     t   |   t  |    t  |   t     |---------------------------------------------------我已經(jīng)嘗試了下面，但無法將子值（A11，A12，A13，A14，A15）設(shè)置為數(shù)組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;}````
查看完整描述

1 回答

?
largeQ

TA貢獻(xiàn)2039條經(jīng)驗(yàn) 獲得超8個(gè)贊

我不確定您是如何定義模板的。但以下似乎有效。請注意，我使用的是括號表示法。從理論上講，它也應(yīng)該與點(diǎn)表示法一起使用，但是TS Lint可能會引發(fā)一些錯(cuò)誤。


控制器


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>


查看完整回答
反對 回復(fù) 2022-09-02
  • 1 回答
  • 0 關(guān)注
  • 119 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號