单击按钮时过滤Angular中的数据答案

【问题标题】：Filter data in Angular when click button单击按钮时过滤Angular中的数据
【发布时间】：2020-11-26 09:04:12
【问题描述】：

我正在使用 Angular 10 和 Angular 材质。我有一个显示一些数据的 mat-table，我获取该数据的数组是：

const ELEMENT_DATA: PeriodicElement[] = [
  {invoice: 1, category: 'Hydrogen', description: 'Hello World!.', startDate: 'H', status: '1', see: '', department: 'Bugambilias', floor: 1, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '1'},
  {invoice: 2, category: 'Helium', description: 'Hello World!.', startDate: 'He', status: '1', see: '', department: 'Bugambilias', floor: 2, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '2'},
  {invoice: 3, category: 'Lithium', description: 'Hello World!.', startDate: 'Li', status: '1', see: '', department: 'Bugambilias', floor: 3, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '1'},
  {invoice: 4, category: 'Beryllium', description: 'Hello World!.', startDate: 'Be', status: '1', see: '', department: 'Bugambilias', floor: 4, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '1'},
  {invoice: 5, category: 'Boron', description: 'Hello World!.', startDate: 'B', status: '1', see: '', department: 'Bugambilias', floor: 5, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '1'},
  {invoice: 6, category: 'Carbon', description: 'Hello World!.', startDate: 'C', status: '1', see: '', department: 'Bugambilias', floor: 6, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '2'},
  {invoice: 7, category: 'Nitrogen', description: 'Hello World!.', startDate: 'N', status: '1', see: '', department: 'Bugambilias', floor: 7, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '2'},
  {invoice: 8, category: 'Oxygen', description: 'Hello World!.', startDate: 'O', status: '1', see: '', department: 'Bugambilias', floor: 8, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '2'},
  {invoice: 9, category: 'Fluorine', description: 'Hello World!.', startDate: 'F', status: '1', see: '', department: 'Bugambilias', floor: 9, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '2'},
  {invoice: 10, category: 'Neon', description: 'Hello World!.', startDate: 'Ne', status: '1', see: '', department: 'Bugambilias', floor: 10, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '1'},
];

在顶部，我有一些按钮来过滤数据，我知道如何使用“类型”值（最后一个）过滤它，但是当我单击按钮时显示过滤后的数据时遇到了一些麻烦。

这些是我的按钮，用于过滤包含特定数据的行。

有人知道怎么做这个过滤器吗？

PS。如果您需要更多信息，请告诉我！

谢谢！

【问题讨论】：

您可以尝试在代码沙箱上托管此问题，以便我们重新创建您的问题吗？
嗨！对不起，我来晚了。这是代码：codesandbox.io/live/y0vl61g

标签： angular typescript angular-material

【解决方案1】：

已经回复click here

代码：

this.dataSource = new MatTableDataSource(ELEMENT_DATA);
this.dataSource.sort = this.sort;
this.dataSource.filterPredicate = function(data: any, filterValue: string) {
  return data.specificColumn /** replace this with the column name you want to filter */
    .trim()
    .toLocaleLowerCase().indexOf(filterValue.trim().toLocaleLowerCase()) >= 0;
};

【讨论】：