为什么“mat-table”会报告“缺少页眉、页脚和行的定义；无法确定应该呈现哪些列”？答案

【问题标题】：Why does "mat-table" report "Missing definitions for header, footer, and row; cannot determine which columns should be rendered"?为什么“mat-table”会报告“缺少页眉、页脚和行的定义；无法确定应该呈现哪些列”？
【发布时间】：2021-01-18 01:31:49
【问题描述】：

我想在我的 Angular 9 应用程序中创建一个垫表。我试图简化事情。我的 .ts 文件是

export class LatestComponent implements OnInit {

  dataSource: MatTableDataSource<item>;

  constructor(
    private apiService: ApiService
  ) { }

  ngOnInit(): void {
    this.apiService.getLatest().subscribe(items => {
      console.log(items[0]);
      this.dataSource = new MatTableDataSource(items);
    });
  }

}

而我的简单单列表是...

<mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef> item </mat-header-cell>
      <mat-cell *matCellDef="let item">{{ item.title }}</mat-cell>
    </ng-container>
</mat-table>

我已验证每个对象中都有一个“标题”属性，这些对象从我的观察者返回。但是我仍然收到以下错误

ERROR Error: Missing definitions for header, footer, and row; cannot determine which columns should be rendered.
    Angular 27
    RxJS 5
    Angular 9

我需要添加什么来渲染我的表格？

【问题讨论】：

标签： angular header angular9 mat-table

【解决方案1】：

您需要指定行（<mat-header-row> 和<mat-row>）定义：

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="title">
    <mat-header-cell *matHeaderCellDef> item </mat-header-cell>
    <mat-cell *matCellDef="let item">{{ item.title }}</mat-cell>
  </ng-container>

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

并且还定义应该显示哪些列（displayedColumns 变量）：

export class LatestComponent implements OnInit {

  dataSource: MatTableDataSource<item>;
  displayedColumns: string[] = ['title']

  constructor(
    private apiService: ApiService
  ) { }

  ngOnInit(): void {
    this.apiService.getLatest().subscribe(items => {
      console.log(items[0]);
      this.dataSource = new MatTableDataSource(items);
    });
  }

}

【讨论】：