Angular Material表格无法渲染数据，提示找不到id列求助

核心错误原因 #

你遇到的Could not find column with id "id"错误，是因为模板中列定义的matColumnDef值与displayedColumns中的列名不匹配，且缺少其他列的定义：

• 模板里错误地将id列的matColumnDef写成了date，导致表格找不到对应id列的定义；
• 你只尝试定义了id列（还写错了名称），name和email列完全没有对应的<ng-container>容器，后续渲染也会触发同类错误。

修复步骤 #

1. 将id列的matColumnDef值从date修正为id；
2. 补充name和email列的容器定义，确保displayedColumns中的每一列都有对应的matColumnDef配置。

修改后的完整模板代码如下：

<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
  <!-- Id列定义 -->
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
    <mat-cell *matCellDef="let contact">
      <input type="text" matInput [value]="contact.id" readonly>
    </mat-cell>
  </ng-container>

  <!-- Name列定义 -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
    <mat-cell *matCellDef="let contact">
      <input type="text" matInput [value]="contact.name" readonly>
    </mat-cell>
  </ng-container>

  <!-- Email列定义 -->
  <ng-container matColumnDef="email">
    <mat-header-cell *matHeaderCellDef mat-sort-header> E-mail </mat-header-cell>
    <mat-cell *matCellDef="let contact">
      <input type="text" matInput [value]="contact.email" readonly>
    </mat-cell>
  </ng-container>

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

额外优化提示 #

• 你的Contact接口中id定义为string类型，但内存数据里的id是number类型，虽然不影响当前渲染，但为了类型安全，建议统一两者的类型（比如都改为number）；
• 从你控制台的输出可以确认数据已正常获取，ContactService的getContacts()方法逻辑无问题。

内容的提问来源于stack exchange，提问作者rejkid