Angular Material 可扩展数据表不显示数据

Question

我试图用 API 调用中我自己的数据复制此代码 Angular Material Expandable Table，但数据排序方式错误。它应该返回一个对象数组，但它返回一个数组[]，里面看起来是另一个数组或类似的东西。

component.ts

connect(): Observable<DegreeDetails[]> {
    const rows = [];
    this.registryService.getFullRegistryUniversity().forEach(degreeDetails => rows.push(degreeDetails, { detailRow: true, degreeDetails }));
    console.log(rows);
    return of(rows);
  }

registry.service.ts:

getFullRegistryUniversity():  Observable<DegreeDetails[]> {
    return this.http.get<DegreeDetails[]>(this.serviceUrl + 'fullregistryuniversity')
  }

component.html:

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="graduateRut">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let degreeDetails"> {{degreeDetails.graduateRut}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="major">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let degreeDetails"> {{degreeDetails.name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="degreeStatus">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let degreeDetails"> {{degreeDetails.degreeStatus}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="expandedDetail">
      <mat-cell *matCellDef="let detail"> 
        The symbol for {{detail.degreeDetails.major}}
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"
            matRipple 
            class="element-row" 
            [class.expanded]="expandedElement == row"
            (click)="expandedElement = row"></mat-row>
    <mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
            [@detailExpand]="row.degreeDetails == expandedElement ? 'expanded' : 'collapsed'"
            style="overflow: hidden"> 
    </mat-row>
  </mat-table>
</div>

我做错了什么？感谢您的帮助！

Answer 1

我不得不将部分逻辑移至服务中：

connect(): Observable<DegreeDetails[]> {
    return this.registryService.getFullRegistryUniversity() 
  }

getFullRegistryUniversity():  Observable<DegreeDetails[]> {
    const rows = [];
    return this.http.get<DegreeDetails[]>(this.serviceUrl + 'fullregistryuniversity')
    .map(res => {
      res.forEach(degreeDetails =>  
        { console.log(degreeDetails)
          rows.push(degreeDetails, { detailRow: true, degreeDetails })}

        );
        console.log(rows);
        return rows;
    })
  }

Angular Material 可扩展数据表不显示数据

Angular Material expandable datatable not displaying data

angular-material2

angular