Need to display Nested JSON Object in Material Data Table

问题

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

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"
    }]
  }
]

This is my UI: MatTableDataSource

This is my workstation.model.ts

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

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.

回答1:

You can do something like this:

.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;
    ...
  });
}
...

Hope that helps.

来源：https://stackoverflow.com/questions/55511432/need-to-display-nested-json-object-in-material-data-table