如何使用管道过滤角度 2 中的列表

Question

我正在尝试使用我没想到的管道过滤我的列表。我不知道如何将input字段值发送到管道。

这是我的代码

https://plnkr.co/edit/WFMo8Az7BSJaRJAVVxyE?p=preview当我输入"a"时，它应该只在列表中显示"abc">

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

@Pipe({ name: 'listpipe' })
export class ListPipe implements PipeTransform {
  transform(items: any[], filter: string) {
     if (!items || !filter) {
            return items;
        }
  return items.filter(item => item.name.indexOf(filter) !== -1);
  }
}

Answer 1

您忘记将值字符串(输入文本的值(传递给筛选器。

所以在组件类中，它应该是：

<li *ngFor="let l of v  | listpipe:values">{{l.name}}</li>

而不是：

<li *ngFor="let l of v  | listpipe">{{l.name}}</li>

您可以在官方文档中找到有关管道参数的更多信息：https://angular.io/docs/ts/latest/guide/pipes.html#parameterizing-a-pipe