Angular Material表格无数据且报_columnCssClassName不可迭代错误排查

核心问题分析 #

1. 列定义大小写不匹配
   displayedColumns数组里的'Id'是大写开头，而HTML中对应的列定义是matColumnDef="id"（小写），Angular Material的列标识是大小写敏感的，这会导致表格无法匹配到对应的列定义。

2. 数据源类型与传入数据错误

• 你的dataSource类型定义为MatTableDataSource<Customers["_embedded"]>，但Customers["_embedded"]是包含customers数组的对象，而MatTableDataSource需要接收数组类型的数据。
• 当前代码直接把整个API返回的res（完整的Customers对象）传给了MatTableDataSource，正确的做法应该是传入res._embedded.customers这个客户数组。

3. 无效的空列定义
   HTML中存在一个<ng-container matColumnDef="">的空列定义，空的列标识会触发Angular Material内部的迭代错误，且该列的单元格定义未正确绑定数据上下文。

修正后的组件.ts代码 #

export class CustomersComponent implements OnInit, OnDestroy{

  // 修正列名大小写，与HTML中的matColumnDef保持一致
  displayedColumns: string [] = ['id', 'name', 'address', 'email', 'mailing', 'gdpr', 'tags'];
  // 数据源类型改为单个客户对象的数组
  public dataSource: MatTableDataSource<Customers["_embedded"]["customers"][0]>;

  private customerSubscription: Subscription;

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  constructor(
    private customersServcice: CustomersService,
  )
  { }

  ngOnInit() {
    this.getAllCustomers();
  }

  getAllCustomers() {
    this.customerSubscription = this.customersServcice.getAllCustomersList().subscribe(
      (res) => {
        console.log('res: ', res);
        // 传入正确的客户数组
        this.dataSource = new MatTableDataSource(res._embedded.customers);
        console.log('this.dataSource: ', this.dataSource);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      });
  }

  ngOnDestroy() {
    if(this.customerSubscription) {
      this.customerSubscription.unsubscribe();
    }
  }
}

修正后的HTML代码 #

<table mat-table [dataSource]="dataSource" class="crm-table mat-elevation-z0">
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> Id </th>
    <td mat-cell *matCellDef="let element" class="left-text"> {{element.id}} </td>
  </ng-container>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element" class="left-text"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="address">
    <th mat-header-cell *matHeaderCellDef> Address </th>
    <td mat-cell *matCellDef="let element" class="left-text"> {{element.address}} </td>
  </ng-container>
  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef> Email </th>
    <td mat-cell *matCellDef="let element" class="left-text"> {{element.email}} </td>
  </ng-container>
  <ng-container matColumnDef="mailing">
    <th mat-header-cell *matHeaderCellDef> Mailing </th>
    <td mat-cell *matCellDef="let element" class="left-text"> {{element.mailing}} </td>
  </ng-container>
  <ng-container matColumnDef="gdpr">
    <th mat-header-cell *matHeaderCellDef> GDPR </th>
    <td mat-cell *matCellDef="let element" class="left-text"> {{element.gdpr}} </td>
  </ng-container>
  <ng-container matColumnDef="tags">
    <th mat-header-cell *matHeaderCellDef> Tags </th>
    <td mat-cell *matCellDef="let element" class="left-text"> {{element.tags}} </td>
  </ng-container>
  <!-- 如需保留操作列，给列定义有效名称 -->
  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef> </th>
    <td mat-cell *matCellDef="let element" class="left-text"> + </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>
</table>

若保留操作列，需在displayedColumns数组中添加'actions'，示例：

displayedColumns: string [] = ['id', 'name', 'address', 'email', 'mailing', 'gdpr', 'tags', 'actions'];

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