Angular Material动态数据绑定无结果，请求问题排查

核心问题分析 #

1. TS文件数据结构与逻辑错误 #

• 数组访问错误：初始定义BasicData为数组类型（包含一个配置对象），但ngOnInit中直接调用this.BasicData.basicHfColumnData，数组本身无该属性，需通过索引访问数组内的对象：this.BasicData[0].basicHfColumnData。
• 数据结构篡改：ngOnInit中错误将BasicData从数组转为对象：this.BasicData = { ...this.BasicData, basicHfColumnData: this.dataSource }，导致后续模板遍历BasicData.columnTitleData时找不到对应属性（原数组的配置对象被打散成键值对）。
• 字段与类型不匹配：第一条数据的字段为label而非接口定义的name，导致数据映射失败；dataSource类型声明为MatTableDataSource<Element>，这里的Element是全局DOM类型，应替换为自定义的PeriodicElement。

2. 模板文件表格配置错误 #

• 列定义ID重复：matColumnDef使用固定值"col"，所有列共享同一列定义ID，Angular Material无法区分不同列，需为每个列设置唯一ID（如col.source）。
• 数据绑定逻辑错误：{{ element[col] }}中col是对象，应使用col.source作为字段名（即{{ element[col.source] }}），否则会尝试用整个对象作为键访问元素属性，结果为undefined。
• 行配置参数错误：*matHeaderRowDef和*matRowDef需要传入列名字符串数组，而非columnTitleData对象数组，需提前提取列的source字段组成数组。
• 复选框列未正确渲染：selectAllCheckbox列的source为null，直接绑定数据无内容，需使用mat-checkbox组件单独处理。

修正后的代码示例 #

TS文件 #

import { Component, OnInit, VERSION } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  select?: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  dataSource: MatTableDataSource<PeriodicElement>;
  // 修正：直接定义为对象，避免数组索引访问错误
  BasicData: any = {
    isActionButtonRequired: true,
    isSearchRequired: true,
    isPaginationRequired: true,
    basicHfColumnData: [
      {
        select: 'checkbox',
        position: 1,
        name: 'Hydrogen',
        weight: 1.0079,
        symbol: 'H',
      },
      {
        select: 'checkbox',
        position: 2,
        name: 'Helium',
        weight: 4.0026,
        symbol: 'He',
      },
      {
        select: 'checkbox',
        position: 3,
        name: 'Lithium',
        weight: 6.941,
        symbol: 'Li',
      },
    ],
    columnTitleData: [
      { title: 'Select', sort: false, type: 'checkbox', source: 'select' },
      { title: 'Position', sort: true, type: 'number', source: 'position' },
      { title: 'Name', sort: true, type: 'string', source: 'name' },
      { title: 'Symbol', sort: true, type: 'string', source: 'symbol' },
    ],
    pageSizeOptions: [5, 10, 15],
  };
  // 提取列名数组，供表格行配置使用
  displayedColumns: string[];

  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.BasicData.basicHfColumnData);
    this.displayedColumns = this.BasicData.columnTitleData.map(col => col.source);
  }
}

模板文件 #

<div>
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="{{ col.source }}" *ngFor="let col of BasicData.columnTitleData">
      <th mat-header-cell *matHeaderCellDef>
        {{ col.title }}
        <mat-checkbox *ngIf="col.type === 'checkbox'"></mat-checkbox>
      </th>
      <td mat-cell *matCellDef="let element">
        <mat-checkbox *ngIf="col.type === 'checkbox'"></mat-checkbox>
        <span *ngIf="col.type !== 'checkbox'">{{ element[col.source] }}</span>
      </td>
    </ng-container>

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

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