在Angular App中处理过滤值的一种更优雅的方法

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], filterValue: string): any[] {
    if (!items || !filterValue) {
      return items;
    }
    return items.filter(item => item.name.toLowerCase().includes(filterValue.toLowerCase()));
  }
}

import { Component } from '@angular/core';
import { FilterPipe } from './filter.pipe';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  providers: [FilterPipe]
})
export class AppComponent {
  items = [
    { name: 'Apple' },
    { name: 'Banana' },
    { name: 'Orange' }
  ];
  filterValue = '';

  constructor(private filterPipe: FilterPipe) {}

  applyFilter() {
    this.items = this.filterPipe.transform(this.items, this.filterValue);
  }
}

<input type="text" [(ngModel)]="filterValue" (input)="applyFilter()">
<ul>
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>