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

Question

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

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