显示mat的唯一值-选择从角度过滤的dataSource获取数据

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

interface DataItem {
  id: number;
  name: string;
}

@Component({
  selector: 'app-data-table',
  template: `
    <table mat-table [dataSource]="dataSource">

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
      </ng-container>

      <!-- Define other columns here -->

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

    </table>
  `,
})
export class DataTableComponent implements OnInit {
  dataSource: MatTableDataSource<DataItem>;
  displayedColumns: string[] = ['name']; // Add other column names here

  ngOnInit(): void {
    const data: DataItem[] = [
      { id: 1, name: 'John' },
      { id: 2, name: 'Jane' },
      { id: 3, name: 'John' },
      { id: 4, name: 'Alice' },
      { id: 5, name: 'Bob' },
      { id: 6, name: 'Jane' },
    ];

    // Filter unique names
    const uniqueNames = Array.from(new Set(data.map(item => item.name)));

    // Create new data source with unique names
    this.dataSource = new MatTableDataSource<DataItem>(uniqueNames.map(name => {
      return {
        id: data.find(item => item.name === name)?.id ?? 0,
        name: name,
      };
    }));
  }
}