Angular 5 材料表未显示数据答案

【问题标题】：Angular 5 material table isn't showing dataAngular 5 材料表未显示数据
【发布时间】：2018-10-29 04:51:36
【问题描述】：

你好，我正在开发一个使用 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>

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 的导入中添加了材质模块。奇怪的是，即使这些例子也不起作用。有什么想法吗？

我更新了我的问题。还是不行

【问题讨论】：

您是否按照设置指南进行操作？ v5.material.angular.io/guide/getting-started
是的。在其他页面上，我使用其他材料组件，但只有表格不起作用
变更检测可能有问题……你是手动做变更检测吗……在父组件中还是在同一个组件中
检测是什么意思？
尝试像这样添加 DI：constructor(private ref: ChangeDetectorRef) 并添加这一行 this.ref.detectChanges();在 this.movements = newMovemnts; 之前

标签： angular typescript angular-material

【解决方案1】：

通过文档Table | Angular Material，

根据文档，<th mat-header-cell *matHeaderCellDef> SerialNr. </th> 需要成为 ng-container 的一部分。没有它尝试过，表格不会呈现。 在你的情况下，这是缺失的。
displayedColumns 需要是一个字符串数组，其中包含您需要显示的列。 我在您的 component.ts 中也看到了这一点。你的情况应该是displayedColumns = ['SerialNr'];

一切看起来都很好。

在stackblitz 上创建了一个现有示例

【讨论】：

我已经包含了您的答案，但它仍然无法正常工作。
能不能创建一个stackblitz项目，方便调试

【解决方案2】：

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

这个回答给了我灵感：Calling renderRows() on Angular Material Table

【讨论】：