Material Design Table无法绑定dataSource对象，报属性未识别错误

这个问题我之前开发时也碰到过，核心原因就是你的模块没导入Angular Material的表格模块，导致Angular认不出<table>上的dataSource属性。下面一步步来解决：

1. 导入必要的Material模块 #

找到HistoryComponent所属的模块（比如HistoryModule或者AppModule），把MatTableModule和MatSortModule加进去——因为你用到了排序功能，所以两个都要导：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入Material表格和排序模块
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
// 导入你的组件
import { HistoryComponent } from './history.component';

@NgModule({
  declarations: [HistoryComponent],
  imports: [
    CommonModule,
    MatTableModule, // 关键！没有这个，Angular就识别不了table的dataSource属性
    MatSortModule   // 用到排序功能必须导入这个
  ]
})
export class HistoryModule { }

2. 检查模板的表格结构 #

确保你的模板用的是Material表格的标准写法，一定要给<table>加上mat-table指令，不然Angular会把它当成普通表格：

<table mat-table [dataSource]="dataSource" matSort>
  <!-- 示例列定义 -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> 序号 </th>
    <td mat-cell *matCellDef="let item"> {{item.id}} </td>
  </ng-container>

  <!-- 其他列按照这个格式定义 -->

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

3. 组件内正确初始化数据源 #

回到HistoryComponent里，确保dataSource、列数组和排序都配置到位：

import { Component, OnInit, ViewChild } from "@angular/core";
import { MatTableDataSource, MatSort } from "@angular/material";

@Component({
  selector: "app-history",
  templateUrl: "./history.component.html",
  styleUrls: ["./history.component.css"] // 注意路径要正确
})
export class HistoryComponent implements OnInit {
  dataSource = new MatTableDataSource<any>(); // 把any替换成你的实际数据类型
  displayedColumns: string[] = ['id', 'operation', 'time']; // 你的列名数组
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  ngOnInit() {
    // 模拟加载历史数据，替换成你实际的数据源逻辑
    const historyList = [
      {id: 1, operation: '新增', time: '2024-05-20'},
      {id: 2, operation: '修改', time: '2024-05-21'}
    ];
    this.dataSource.data = historyList;
    this.dataSource.sort = this.sort;
  }
}

额外提醒 #

如果这个组件是放在自定义Material模态框里，要确认模态框所在的模块也导入了MatTableModule和MatSortModule，或者你的HistoryModule已经被正确导入到模态框的模块中。另外注意拼写，dataSource是驼峰写法，别写错大小写！

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