这个错误是因为在Angular Mat表中定义了重复的列名称。要解决这个问题,需要确保在MatTableDataSource中的数据定义和matColumnDef指令中的列定义名称是唯一的。以下是一个解决方法的代码示例:
HTML模板:
列1
{{element.column1}}
列2
{{element.column2}}
组件代码:
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
displayedColumns: string[] = ['column1', 'column2']; // 列定义名称
dataSource = new MatTableDataSource(ELEMENT_DATA); // 数据源
}
export interface Element {
column1: string;
column2: string;
}
const ELEMENT_DATA: Element[] = [
{ column1: '数据1', column2: '数据2' },
{ column1: '数据3', column2: '数据4' },
{ column1: '数据5', column2: '数据6' },
];
请确保在displayedColumns
数组中的列定义名称是唯一的。