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

在使用Angular 2进行过滤之前，首先需要确保已安装了Angular CLI，并创建了一个新的Angular项目。

步骤如下：

打开命令行工具，并进入要创建项目的目录。
运行以下命令来创建一个新的Angular项目：

ng new my-project

cd my-project

在项目中创建一个名为filter的组件：

ng generate component filter

在filter.component.ts文件中，导入必要的Angular模块和其他依赖项：

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

在filter.component.html文件中，添加一个输入框和显示过滤后数据的列表：

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