Angular 15.2中mat-table无法显示的问题排查

问题背景 #

使用Angular 15.2开发时，普通HTML表格可正常渲染Employee数组数据，但Material Table（mat-table）无法显示数据，已确认数据在HTML中可访问。

现有代码 #

Component.ts 数据结构与数据源

export interface Employee {
  Id : number,  
  FirstName:string, 
  LastName:string,  
  Email:string,
  Gender:string,    
  JobTitle:string
}

...

_the_content : Employee[] =[{
    "Id": 1,
    "FirstName": "Johannah",
    "LastName": "Kiffin"
  }, {
    "Id": 2,
    "FirstName": "Eldin",
    "LastName": "Astbery"
  }, {
    "Id": 3,
    "FirstName": "Nahum",
    "LastName": "Mounce"
  }, {
    "Id": 4,
    "FirstName": "Gallard",
    "LastName": "Standell"
  }];

Component.html 模板代码

<div class="container">
  <table class="table table-responsive table-striped center">
    <tr>
      <th>#Id</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
    <tr *ngFor="let row of _the_content">
      <td>{{row.Id}}</td>
      <td>{{row.FirstName}}</td>
      <td>{{row.LastName}}</td>
    </tr>
  </table>
</div>
<div class="container">
  <table mat-table class="emp-data-table" [dataSource]="_the_content">
  
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>#Id</th>
        <td mat-cell class="id-cell" *matCellDef="let row">{{row.Id}}</td>
    </ng-container>
  
    <ng-container matColumnDef="first-name">
        <th mat-header-cell *matHeaderCellDef>First Name</th>
        <td mat-cell class="first-name-cell" *matCellDef="let row">{{row.FirstName}}</td>
    </ng-container>
  
    <ng-container matColumnDef="last-name">
        <th mat-header-cell *matHeaderCellDef>Last Name</th>
        <td mat-cell class="last-name-cell" *matCellDef="let row">{{row.LastName}}</td>
    </ng-container>
    
    <tr mat-header-row *matHeaderRowDef="_displayed_columns"></tr>
    
    <tr mat-row *matRowDef="let row; columns: _displayed_columns"></tr>
    
  </table>
</div>

App.module.ts 导入模块

import { MatInputModule } from "@angular/material/input";
import { MatTableModule } from "@angular/material/table";
import { MatSortModule } from "@angular/material/sort";
import { MatPaginatorModule } from "@angular/material/paginator";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner"

...
imports: [
    ...
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatProgressSpinnerModule
    ...
]

问题原因 #

Mat-Table 依赖_displayed_columns数组确定要渲染的列（对应模板中matColumnDef的标识值），但当前Component.ts中未定义该变量，导致表格无法识别需要渲染的列集合。

解决步骤 #

1. 在Component.ts的类中添加_displayed_columns数组，值与模板中matColumnDef的标识一一对应：

_displayed_columns: string[] = ['id', 'first-name', 'last-name'];

2. 重新运行项目，Mat-Table将根据_displayed_columns指定的列标识，匹配对应的ng-container模板内容，渲染表头和数据行。

额外检查项 #

• 确保_displayed_columns中的每个值与模板中matColumnDef的属性值完全一致（大小写敏感）
• 若后续添加分页、排序功能，需确保数据源正确关联MatPaginator和MatSort（当前已导入相关模块，可按需配置）

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