显示空行的 Angular Material 表

Question

我正在尝试将 Angular 的 Material 表集成到一个新项目中，但由于某种原因，数据没有显示，只显示空行。我在另一个项目中使用了相同的逻辑，并且它有效，我花了很多时间寻找原因但没有任何效果。

我需要将表添加到名为“cores”的延迟加载模块中，并导入 Material 表模块:

import { MatTableModule } from '@angular/material';
imports: [
    CommonModule,
    CoresRoutingModule,
    MatTableModule
  ]

我创建了一个返回“ICore”对象数组的服务:

getCores(): Observable<ICore[]> {
    return this.http.get<ICore[]>('/cores');
  }

ICore界面:

export interface ICore {
  id: number;
  name: string;
}

我的“index.component.html”文件中的 HTML:

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
    <mat-cell *matCellDef="let core"> {{ core.id }}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let core"> {{ core.name }}</mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

“index.components.ts”文件中的逻辑:

dataSource = new MatTableDataSource<ICore>();
columnsToDisplay = ['id', 'name'];

constructor(private coreService: CoreService) { }

  ngOnInit() {
    this.coreService.getCores().subscribe(
      res => {
        this.dataSource.data = res;
        console.log(this.dataSource);
      },
      err => console.log(err)
    );
  }

从我的 console.log 中我看到数据源已填充:

MatTableDataSource {_renderData: BehaviorSubject, _filter: BehaviorSubject, _internalPageChanges: Subject, _renderChangesSubscription: Subscriber, sortingDataAccessor: ƒ, …}
data: Array(3)
0: {id: 1, name: "core1"}
1: {id: 2, name: "core2"}
2: {id: 3, name: "core3"}

我也尝试过这个方法:

dataSource = new CoreDataSource(this.coreService);
columnsToDisplay = ['id', 'name'];

constructor(private coreService: CoreService) { }

export class CoreDataSource extends DataSource<any> {   
    constructor(private coreService: CoreService) {
        super();
    }

  connect(): Observable<ICore[]> {
    console.log(this.coreService.getCores());
    return this.coreService.getCores();   }

  disconnect() {} }

但是结果是一样的。我觉得这是一件愚蠢的事情，我忘记了做，但我没有找到它。

提前致谢!

Answer 1

确保使用相同的变量来显示您在组件中定义的列。

组件:

columnsToDisplay = ['id', 'name'];

模板:

<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>