Angular Material数据表如何实现多列组合过滤？

Let's break down what's going wrong with your current code and fix both the multi-column filtering and filter-clearing problems step by step.

What's Wrong With Your Current Implementation #

1. Overwriting the Original Data Source: Every time you call applyFilter, you create a new MatTableDataSource using the already filtered data. This means your original, unfiltered data gets lost—so when you try to clear the filter, you can't revert back to the full dataset.
2. Default Filter Limitation: The built-in filter property of MatTableDataSource only does a simple global string match. It can't handle logical conditions like Marks > 90 AND School = 'abc' out of the box.

Step 1: Preserve the Original Data #

First, we need to keep a copy of your original unfiltered data so we can always revert back to it. Add this to your component:

// Define an interface for your data type (replace with your actual structure)
interface StudentData {
  Name: string;
  Age: number;
  Marks: number;
  School: string;
}

originalData: StudentData[]; // Stores the full, unfiltered dataset
dataSource = new MatTableDataSource<StudentData>();

ngOnInit() {
  // Assume this is where you load your initial data (from API, etc.)
  this.originalData = [...yourLoadedStudentData];
  this.dataSource.data = this.originalData;
}

Step 2: Custom Filter Predicate for Multi-Column Logic #

To handle combined conditions like "Marks > 90 AND School = 'abc'", we'll define a custom filterPredicate. This function tells the data source how to evaluate each row against your filter conditions.

We'll use a JSON string to pass multiple filter criteria (since the filter property only accepts a string):

// Set up the custom filter when initializing the component
ngOnInit() {
  // ... (keep your existing data loading code)
  
  this.dataSource.filterPredicate = (row: StudentData, filter: string) => {
    const criteria = JSON.parse(filter);
    let matches = true;

    // Check Marks condition (if provided)
    if (criteria.minMarks) {
      matches = matches && row.Marks > criteria.minMarks;
    }

    // Check School condition (if provided)
    if (criteria.school) {
      matches = matches && row.School.toLowerCase() === criteria.school.toLowerCase();
    }

    // Add more conditions here for other columns (Name, Age) as needed
    return matches;
  };
}

Step 3: Rewrite the applyFilter Function #

Now update your applyFilter to use the custom logic, and stop overwriting the data source:

applyFilter(filterCriteria: { minMarks?: number; school?: string }) {
  // Convert criteria to JSON string (required for MatTableDataSource's filter)
  const filterString = JSON.stringify(filterCriteria);
  
  // Apply the filter
  this.dataSource.filter = filterString;
  
  // Update your filtered data reference (if you need it elsewhere)
  this.filteredDataSource = this.dataSource.filteredData;
  this.filterVal = filterString;

  // Clear filter if all criteria are empty
  const hasNoCriteria = Object.values(filterCriteria).every(val => !val);
  if (hasNoCriteria) {
    this.dataSource.filter = '';
  }
}

How to Use This #

To filter for students with Marks > 90 and from 'abc' School:

this.applyFilter({ minMarks: 90, school: 'abc' });

To clear all filters and show the full dataset:

this.applyFilter({});

If you're using input fields to collect filter values (e.g., a text box for school, a number input for min marks), you can bind those inputs to a form group and pass the form values directly to applyFilter.

Fixing the Filter Clear Issue #

The key fix here is that we never overwrite the original dataSource or lose the originalData copy. When we clear the filter, setting dataSource.filter = '' triggers the filter predicate to return all rows, restoring the full dataset.

内容的提问来源于stack exchange，提问作者Saif Ali