Angularmat-table显示重复行
在使用 Angular 的 mat-table 时，有时可能会出现重复行的情况，这是由于数据源中存在相同的数据导致的。要解决这个问题，我们可以通过以下方法：
- 在创建表格前，对数据源进行去重处理。可以使用 lodash 库中的 _.uniqBy 或 _.uniq 方法，也可以使用原生的 JavaScript 对数组进行去重的方法。
示例代码：
import { Component } from '@angular/core'; import * as _ from 'lodash';
@Component({
selector: 'app-table',
template:
})
export class TableComponent {
dataSource = [
{id: 1, name: 'John'},
{id: 2, name: 'John'},
{id: 3, name: 'Peter'}
];
displayedColumns = ['id', 'name'];
{{column}} {{row[column]}}
constructor() { this.dataSource = _.uniqBy(this.dataSource, 'id'); } }
- 在 mat-table 中使用 trackBy 属性，跟踪每一行数据并根据其独特的属性进行区分。在数据源中添加一个唯一标识符的属性，并在 mat-table 中通过 trackBy 属性指定该属性。
示例代码：
import { Component } from '@angular/core';
@Component({
selector: 'app-table',
template:
})
export class TableComponent {
dataSource = [
{id: 1, name: 'John'},
{id: 2, name: 'John'},
{id: 3,
{{column}} {{row[column]}}