如何使用角度2中的管道过滤列表 [英] how to filter the list using pipes in angular 2

问题描述

能否请您告诉我如何使用角度为2的管道过滤列表

could you please tell me how to filter the list using pipes in 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
   );
  }

}

但是当我在输入字段中键入内容时，过滤不起作用吗?

But filtering is not working when I type on input field ?

推荐答案

工作演示

您应该这样做

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是否具有值，并且第一次您不具有args的值..这就是它不起作用的原因

check for args is having value or not , and first time you are not going to have value for args ..that is a reason its not working

这篇关于如何使用角度2中的管道过滤列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！