如何为一个列表添加多个过滤器，并在angular 7中分别取消选中它们？

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'multiFilter'
})
export class MultiFilterPipe implements PipeTransform {
  transform(items: any[], filters: any[]): any[] {
    if (!items || !filters) {
      return items;
    }

    return items.filter(item => {
      for (let filter of filters) {
        if (!filter || !filter.value) {
          continue;
        }

        if (item[filter.key] !== filter.value) {
          return false;
        }
      }

      return true;
    });
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-list',
  template: `
    <ul>
      <li *ngFor="let item of items | multiFilter:filters">{{ item.name }}</li>
    </ul>
  `
})
export class ListComponent {
  items: any[] = [
    { name: 'Item 1', category: 'Category A', color: 'Red' },
    { name: 'Item 2', category: 'Category B', color: 'Blue' },
    { name: 'Item 3', category: 'Category A', color: 'Green' },
    { name: 'Item 4', category: 'Category C', color: 'Red' },
    { name: 'Item 5', category: 'Category B', color: 'Yellow' }
  ];

  filters: any[] = [
    { key: 'category', value: '' },
    { key: 'color', value: '' }
  ];
}

<div>
  <label>Category:</label>
  <select [(ngModel)]="filters[0].value">
    <option value="">All</option>
    <option value="Category A">Category A</option>
    <option value="Category B">Category B</option>
    <option value="Category C">Category C</option>
  </select>
</div>

<div>
  <label>Color:</label>
  <select [(ngModel)]="filters[1].value">
    <option value="">All</option>
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
    <option value="Green">Green</option>
    <option value="Yellow">Yellow</option>
  </select>
</div>

<button (click)="resetFilters()">Reset Filters</button>

resetFilters() {
  this.filters.forEach(filter => {
    filter.value = '';
  });
}