需要在材料数据表中显示嵌套的 JSON 对象

Question

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

这是我的 JSON 对象：

[{
    "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

这是我的工作站.model.ts

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

我查看了 JSON 对象解构、解析、字符串化的教程，但我没有到达那里，因为服务返回的是 Workstation[] 对象而不是 Workstation 对象。请让我知道是否有一种方法可以将 assemblylineName 属性显示为带有其值的列。

Answer 1

你可以这样做：

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

希望对您有所帮助。