Question

Hy，我正在 angular 5 中开展基于网络的应用程序。在这个应用程序中，我们使用角度材料。在其中一个页面上我们有一个mat-table但我们无法让它工作。该表从未向我们显示任何数据。我们从多个后端和调试器调用的数据，我们知道数据不是空的。即使我们尝试使用角度材料示例，它仍然无法工作。我们错了什么？

HTML

  <mat-table #invoiceTable [dataSource]="datasource" matSort>
    <ng-container matColumnDef="SerialNr">
      <th mat-header-cell *matHeaderCellDef> SerialNr. </th>
      <td mat-cell *matCellDef="let movement" > {{movement?.serialNr}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;">
    </tr>
  </mat-table>

TS

displayedColumns = ['SerialNr'];
movements = [];
// datasource = new MatTableDataSource<Movement>(this.movements);
datasource: MovementDataSource;

  getMovementsByVehicleID() {
 this.authUser.ownedVehicles.forEach((vehicle) => {
    this.movementService.getMovementsByCarID(vehicle.id).subscribe(
      (newMovemnts) => {
        this.movements = newMovemnts;
        this.datasource.update(newMovemnts);
      },
    );
  }
);
}




export class MovementDataSource extends DataSource<Movement> {

constructor(private movements: Movement[]) {
  super();
}

connect(): Observable<Movement[]> {
  return Observable.of(this.movements);
}

update(movements: Movement[]) {
  movements.forEach((move) => {
    this.movements.push(move);
  });
}

   disconnect(collectionViewer: CollectionViewer): void {
   }
}

MATERIAL.TS

@NgModule({
  imports: [
    MatButtonModule,
    MatToolbarModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatMenuModule,
    MatPaginatorModule,
    MatSidenavModule,
    MatSnackBarModule,
    MatCardModule,
    MatTableModule,
    MatSortModule,
    MatProgressSpinnerModule,
    CdkTableModule,
  ],
  exports: [
    MatButtonModule,
    MatToolbarModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatMenuModule,
    MatPaginatorModule,
    MatSidenavModule,
    MatSnackBarModule,
    MatCardModule,
    MatTableModule,
    MatSortModule,
    MatProgressSpinnerModule,
    CdkTableModule
  ],
  declarations: []
})
export class MaterialModule {
}

我们尝试了很多东西。这是最新版本，但它仍然无法正常工作。当然，我们在app.module.ts的导入中添加了材料模块。奇怪的是，即使这些例子也不起作用。有什么想法吗？

我已经更新了我的问题。它仍然没有工作

Answer 1

通过文档Table | Angular Material，

minimumClientVersion: 15需要成为ng-container的一部分。没有它尝试，表不呈现。 在您的情况下，这是缺少的。
<th mat-header-cell *matHeaderCellDef> SerialNr. </th>需要是一个字符串数组，其中包含您需要显示的列。 我发现你的组件中也有遗漏。。在您的情况下，它应该是displayedColumns

休息一切看起来很好。

已在stackblitz

Answer 2

我遇到了同样的问题，并且在异步数据更新时忘了调用renderRows（）方法。请参阅Angular 5材料表文档https://v5.material.angular.io/components/table/overview。

这个答案给了我启发：Calling renderRows() on Angular Material Table

Angular 5材料表不显示数据

2 个答案: