Question

所以我有一个springboot服务器将json数据暴露给我的角度应用程序，下面链接的数据结构为IBatchInstance。

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

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>

Answer 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');
            });
        }

使用MatTableModule打印json数据

1 个答案: