需要在材料数据表中显示嵌套的JSON对象 [英] Need to display Nested JSON Object in Material Data Table

问题描述

我需要显示来自后端的嵌套JSON对象作为MatTableDataSource的列字段.

I need to display nested JSON Object coming from my backend as the column fields of my MatTableDataSource.

这是我的JSON对象:

This is my JSON Object:

[{
    "workstationId": 100,
    "assemblylineId": 100,
    "workstationDescription": "Testing1",
    "workstationTest": "Yes",
    "createdAt": "2019-03-20",
    "updatedAt": "2019-03-20",
    "assemblylines": [{
      "assemblylineName": "assembly1"
    }]
  },
  {
    "workstationId": 101,
    "assemblylineId": 100,
    "workstationDescription": "workstation1",
    "workstationTest": "No",
    "createdAt": "2019-04-04",
    "updatedAt": "2019-04-04",
    "assemblylines": [{
      "assemblylineName": "assembly5"
    }]
  },
  {
    "workstationId": 102,
    "assemblylineId": 101,
    "workstationDescription": "workstation2",
    "workstationTest": "No",
    "createdAt": "2019-04-04",
    "updatedAt": "2019-04-04",
    "assemblylines": [{
      "assemblylineName": "assembly4"
    }]
  },
  {
    "workstationId": 103,
    "assemblylineId": 102,
    "workstationDescription": "Testing2",
    "workstationTest": "Yes",
    "createdAt": "2019-04-04",
    "updatedAt": "2019-04-04",
    "assemblylines": [{
      "assemblylineName": "assembly3"
    }]
  }
]

这是我的用户界面: MatTableDataSource

这是我的worker.model.ts

This is my workstation.model.ts

export interface Workstation {
  workstationId: number;
  workstationDescription: string;
  workstationTest: string;
  assemblylines: {
    assemblylineName: string;
  };
}

我已经检查了JSON对象解构，解析，字符串化的教程，但由于服务返回的是Workstation []对象而不是Workstation对象，因此我无法到达那里.请让我知道是否有一种方法可以将assemblylineName属性显示为具有其值的列.

I have checked tutorials of JSON Object Destructuring, Parsing, Stringifying but I'm not getting there as the service is returning Workstation[] object instead of Workstation object. Kindly let me know if there's a way I can display assemblylineName property as a column with its values.

推荐答案

您可以执行以下操作:

.html

         <mat-table #table [dataSource]="workstationDataSource">

                // SR NUMBER
                <ng-container matColumnDef="sr_no">
                  <mat-header-cell *matHeaderCellDef>Sr. No.</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.workstationId }}</span>
                  </mat-cell>
                </ng-container>

                // DESCRIPTION
                <ng-container matColumnDef="description">
                  <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.workstationDescription}}</span>
                  </mat-cell>
                </ng-container>

                // TEST
                <ng-container matColumnDef="test">
                  <mat-header-cell *matHeaderCellDef>Test</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.workstationTest}}</span>
                  </mat-cell>
                </ng-container>

                // ASSEMBLY LINES
                <ng-container matColumnDef="assembly_lines">
                  <mat-header-cell *matHeaderCellDef>Assembly Line</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.assemblylines.assemblylineName }}</span>
                  </mat-cell>
                </ng-container>

                // ACTIONS
                <ng-container matColumnDef="actions">
                  <mat-header-cell *matHeaderCellDef></mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <button (click)="edit(row)">EDIT</button>
                    <button (click)="delete(row)">DELETE</button>                    
                  </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

          </mat-table>

.ts

...
displayedColumns = [
  'sr_no',
  'description',
  'test',
  'assembly_lines',
  'actions'
];
workstationDataSource: MatTableDataSource<Workstation>;
...

// then you will need to populate the 'workstationDataSource' variable
getWorkstations() {
  this.http.get(...).subscribe(res => {
    ...
    this.workstationDataSource.data = new MatTableDataSource<Workstation>();
    this.workstationDataSource.data = res;
    ...
  });
}
...

希望有帮助.

这篇关于需要在材料数据表中显示嵌套的JSON对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！