angular - 如何使用 Angular 2 中的管道过滤列表

Question

你能告诉我如何使用 angular 2 中的管道过滤列表吗

https://stackblitz.com/edit/angular-qvtqeu?file=src%2Fapp%2Fapp.component.html

我试过这样

<ul class="user-list | filterlist:userenter">
  <li *ngFor="let user of users" class="user-list__item">

过滤器

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

@Pipe({
  name: 'filterlist'
})
export class FilterlistPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value.filter(
      item => item.first_name.toLowerCase().indexOf(args.toLowerCase()) > -1
   );
  }

}

但是当我在输入字段中输入时过滤不起作用？

Answer 1

Working Demo

你应该这样做

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

@Pipe({
  name: 'filterlist'
})
export class FilterlistPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(!args)
     return value;
    return value.filter(
      item => item.first_name.toLowerCase().indexOf(args.toLowerCase()) > -1
   );
  }
}

检查 args 是否有值(value)，第一次你不会为 args 赋值..这就是它不起作用的原因