显示空行的角材料表

Question

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

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

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>

Answer 2

由于您的数据源位于子变量数据中，因此不会以这种方式呈现。试试下面的代码

<mat-table [dataSource]="dataSource.data">
  <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>