如何修复Angular中mat-table的'dataSource'属性绑定错误？

这个错误的核心原因是当前模块未导入Angular Material表格相关模块，导致Angular无法识别mat-table组件及其dataSource输入属性。以下是具体解决步骤：

1. 在模块中导入必要的Material组件 #

打开使用mat-table的组件所在的模块（通常是app.module.ts），导入MatTableModule（必须）和你模板中用到的其他Material模块（比如MatCheckboxModule），同时确保导入BrowserAnimationsModule（Material组件依赖动画模块）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// 导入Material表格和复选框模块
import { MatTableModule } from '@angular/material/table';
import { MatCheckboxModule } from '@angular/material/checkbox';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTableModule, // 启用mat-table及dataSource属性
    MatCheckboxModule // 支持模板中的mat-checkbox组件
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 确保组件中正确定义数据源及相关变量 #

在AppComponent中，需要正确初始化dataSource、displayedColumns以及多选功能所需的SelectionModel，示例代码如下：

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { SelectionModel } from '@angular/cdk/collections';

// 定义表格数据接口
export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

// 模拟表格数据
const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  selection = new SelectionModel<PeriodicElement>(true, []);

  // 全选/取消全选逻辑
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  toggleAllRows() {
    this.isAllSelected() ? this.selection.clear() : this.selection.select(...this.dataSource.data);
  }

  // 复选框标签文本
  checkboxLabel(row?: PeriodicElement): string {
    if (!row) {
      return `${this.isAllSelected() ? '取消全选' : '全选'}`;
    }
    return `${this.selection.isSelected(row) ? '取消选择' : '选择'} 第${row.position}行`;
  }
}

3. 避免错误使用Schema屏蔽提示 #

错误提示中的CUSTOM_ELEMENTS_SCHEMA和NO_ERRORS_SCHEMA仅适用于Web组件或忽略所有属性错误的场景，而mat-table是Angular Material的官方组件，直接导入对应模块才是正确解决方式，不要用Schema跳过错误检查。

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