Question

我正在尝试将Angular的材料表集成到一个新项目中，但由于某种原因，未显示数据，仅显示空行。我在另一个项目中使用了相同的逻辑，但是在这里却行得通，我花了很多时间来找到原因，但没有任何结果。

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

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中，我看到dataSource已填充：

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>

角材料表显示空行

2 个答案: