时间戳

首页 > 解决方案 > 单击按钮时过滤Angular中的数据

angular - 单击按钮时过滤Angular中的数据

问题描述

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

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。如果您需要更多信息，请告诉我！

谢谢！

标签： angulartypescriptangular-material

解决方案

已经回答了点击这里

代码 ：

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;
};

推荐阅读