Angular 角度5材料表为'；t显示数据

Hy，我正在angular 5中开发一个基于web的应用程序。在这个应用程序中，我们使用角度材质。 在其中一页上，我们有一张垫子桌，但我们无法让它工作。 该表从未向我们显示任何数据。 我们从多个后端调用数据，通过调试器，我们知道数据不是空的。 即使我们尝试使用角度材质示例，它仍然不起作用。我们做错了什么

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>

我们尝试了很多东西。这是最新版本，但仍然不起作用。 当然，我们在app.module.ts的导入中添加了material模块。 奇怪的是，这些例子都不起作用。 有什么想法吗

我已经更新了我的问题。根据文档，它仍然不起作用

SerialNr需要作为记录的ng容器的一部分。在没有它的情况下尝试，但表不会呈现在您的情况下，这是丢失的

displayedColumns

需要是一个字符串数组，其中包含需要显示的列我发现您的组件中也缺少此功能。ts。在您的情况下，它应该是

displayedColumns=['SerialNr']

一切看起来都很好

---

我在

上派生了一个现有的示例，我也遇到了同样的问题，忘记了在更新异步数据时调用renderRows（）方法。参见Angular 5材料表文档

---

这个答案给了我灵感：

您是否遵循了安装指南？对在其他页面上，我使用了其他材质组件，但只有表格不工作。更改检测可能是个问题。。。您是否正在手动执行更改检测。。。。在父组件中或在同一组件中，检测意味着什么？尝试像这样添加DI:constructor（private ref:ChangeDetectorRef）并添加此行this.ref.detectChanges（）；在此之前。移动=新移动；我已经包括了你的答案，但它仍然不起作用。你能创建一个stackblitz项目，这样就很容易调试了吗

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 {
   }
}

@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 {
}