使用 MatTableModule 打印 json 数据答案

【问题标题】：Print json data using MatTableModule使用 MatTableModule 打印 json 数据
【发布时间】：2018-07-03 14:08:20
【问题描述】：

所以我有一个 springboot 服务器向我的 Angular 应用程序公开 json 数据，数据结构是下面链接的 IBatchInstance。

json GET 请求顺利，但 DATA 没有打印，我想我在尝试访问 batchInstance 对象中的 batchDef 属性时出错，但作为一个有角度的初学者，我不知道如何纠正它。有什么想法吗？

PrintJsonComponent.ts

export class PrintJsonComponent implements OnInit {

    displayedColumns = ['id', 'name', 'label', 'perimeter', 'batchState',
                        'creationDate', 'lastModifiedDate'];        
    receivedBatchesData: IBatchInstance[];
    dataSource = new MatTableDataSource(this.receivedBatchesData);


constructor(private http: HttpClient) {
}

ngOnInit() {
    this.makeRequest();
}

makeRequest(): void {
    this.http.get<IBatchInstance[]>(myDataURL).subscribe(data => {
        this.receivedBatchesData = data;
    },
    err => {
        console.log('An error occured during the http GET request');
    });
}

dataJson.ts：

 export interface IBatchInstance {
    id: number;
    batchDef: IBatchDef;
    batchState: string;
    inputData: any[];
    outputData: any[];
    creationDate: string;
    lastModifiedDate: string;
    username: string;
  }

  export interface IBatchDef {
    name: string;
    label: string;
    launchCommand: string;
    perimeter: string;
    inputDataDefs: any[];
    outputDataDefs: any[];
  }

PrintJsonComponent.html：

<!-- ID Column -->
<ng-container matColumnDef="id">
  <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
  <mat-cell *matCellDef="let batchInstance"> {{batchInstance.id}} </mat-cell>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
  <mat-cell *matCellDef="let batchInstance"> {{batchInstance.batchDef.name}} </mat-cell>
</ng-container>

<!-- Label Column -->
<ng-container matColumnDef="label">
  <mat-header-cell *matHeaderCellDef> Label </mat-header-cell>
  <mat-cell *matCellDef="let batchInstance"> {{batchInstance.batchDef.label}} </mat-cell>
</ng-container>

<!-- Perimeter Column -->
<ng-container matColumnDef="perimeter">
  <mat-header-cell *matHeaderCellDef> Perimeter </mat-header-cell>
  <mat-cell *matCellDef="let batchInstance"> {{batchInstance.batchDef.perimeter}} </mat-cell>
</ng-container>

<!-- batchState Column -->
<ng-container matColumnDef="batchState">
  <mat-header-cell *matHeaderCellDef> Batch state </mat-header-cell>
  <mat-cell *matCellDef="let batchInstance"> {{batchInstance.batchState}} </mat-cell>
</ng-container>

<!-- creationDate Column -->
<ng-container matColumnDef="creationDate">
  <mat-header-cell *matHeaderCellDef> Creation date </mat-header-cell>
  <mat-cell *matCellDef="let batchInstance"> {{batchInstance.creationDate}} </mat-cell>
</ng-container>

<!-- lastModifiedDate Column -->
<ng-container matColumnDef="lastModifiedDate">
  <mat-header-cell *matHeaderCellDef> Last modification </mat-header-cell>
  <mat-cell *matCellDef="let batchInstance"> {{batchInstance.lastModifiedDate}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

【问题讨论】：

在this.receivedBatchesData = data; 放置一个断点，然后你会收到什么

标签： html json angular typescript angular-material

【解决方案1】：

好的，我的错误是在 dataSource 对象上，这里进行更正以使其正常工作：

     dataSource = new MatTableDataSource();
     makeRequest(): void {
            this.http.get<IBatchInstance[]>(testJsonBatchesDr3).subscribe(data => {
                this.dataSource.data = data;
                console.log(this.dataSource.data);
            },
            err => {
                console.log('An error occured during the http GET request');
            });
        }

【讨论】：