Angular 19中table组件无法绑定dataSource属性的问题求助

问题核心原因 #

报错Can't bind to 'dataSource' since it isn't a known property of 'table'的本质是：原生<table>标签本身不存在dataSource属性，该属性是Angular Material的MatTableDirective提供的输入属性，必须通过mat-table指令将该功能挂载到table标签上。Angular 19对指令绑定的校验更严格，旧版本的宽松兼容导致之前的代码可运行，但新版本触发报错。

解决方案 #

1. 为table标签添加mat-table指令 #

修改HTML模板中的table标签，补充mat-table属性：

<table id="tableId" mat-table [dataSource]="dataSource" matSort matSortActive="id" matSortDirect="asc"
  class="table table-striped table-bordered table-sm ">

2. 确保正确导入Material模块 #

根据项目架构选择对应的导入方式：

情况1：NgModule架构

在组件所属的NgModule的imports数组中添加以下模块：

import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    // 其他必要模块
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ]
})
export class YourFeatureModule { }

情况2：Standalone组件

在组件的@Component装饰器的imports数组中添加模块：

import { Component, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';

@Component({
  selector: 'your-table-component',
  templateUrl: './your-table.component.html',
  standalone: true,
  imports: [
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ]
})
export class YourTableComponent {
  @Input() dataSource: MatTableDataSource<any> = new MatTableDataSource();
  // 其他组件逻辑
}

3. 修复模板中的语法错误 #

你的模板中<tr mat-row>标签存在语法错误（多余的闭合引号、样式未正确合并），修正为：

<tr mat-row *matRowDef="let row; columns: displayedColumns" style="background-color: #ffffff; padding: 0; margin: 0; max-height: 10px;"></tr>

4. 匹配Material与Angular版本 #

执行命令检查当前Material版本：

npm list @angular/material

若版本非19.x.x，更新到对应版本：

npm install @angular/material@19

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