如何使用angular2根据过滤后的列表对主数据进行过滤

ng new my-project

cd my-project

ng generate component filter

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

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {
  // 定义主数据列表
  mainData: any[] = [
    { id: 1, name: 'Apple', category: 'Fruit' },
    { id: 2, name: 'Banana', category: 'Fruit' },
    { id: 3, name: 'Carrot', category: 'Vegetable' }
  ];

  // 定义过滤后的列表
  filteredData: any[];

  // 过滤函数
  filterData(filterValue: string) {
    // 根据过滤值过滤主数据列表
    this.filteredData = this.mainData.filter(item => {
      return item.name.toLowerCase().includes(filterValue.toLowerCase());
    });
  }
}

<input type="text" [(ngModel)]="filterValue" (input)="filterData(filterValue)" placeholder="Filter by name">
<ul>
  <li *ngFor="let item of filteredData">{{ item.name }}</li>
</ul>

<app-filter></app-filter>

ng serve