Question

我正在尝试在angular2中创建一个过滤器，我制作了一系列这样的产品：

private products = ["Apple", "Banana", "Orange"];

这是我的过滤管道：

import {Pipe} from 'angular2/core';

@Pipe({name:'filter'})

export class FilterPipe {
    transform(value, args) {
        if(!args[0]){
            return value;
        }
        else if (value) {
            return value.filter(item => {
                for (let key in item){
                    if((typeof item[key]==='string' || item[key] instanceof String) && (item[key].indexOf(args[0]) !== -1)){
                        return true;
                    }
                }
            });
        }
    }
}

在我的组件中，我添加了ul元素来显示产品，并添加了input元素来过滤它们：

<input type="text" [(ngModel)]="filterText">
                <ul>
                    <li *ngFor="#product of products | filter: filterText">
                        {{product}}
                    </li>
                </ul>

运行此代码时的问题是它只在输入第一个字母时起作用（过滤），再输入一次字母就不起作用了。有什么帮助吗？

Answer 1

您尝试将数组中字符串的每个字符与输入的文本进行比较

'A'   => ('Apple') => 'A'.indexOf('A')   'p'.indexOf('A')   ...
'Ap'  => ('Apple') => 'A'.indexOf('Ap')  'p'.indexOf('Ap')  ... - always false
'App' => ('Apple') => 'A'.indexOf('App') 'p'.indexOf('App') ... - always false

我会按如下方式更改管道：

@Pipe({name:'filter'})   
export class FilterPipe {
  transform(value, args) {
    if(!args[0]) return value;   
    return value.filter(item => item.indexOf(args[0]) > -1);
  }
}

https://plnkr.co/edit/TpJ6Zu8QovWINqx04KUY?p=preview

<强> !!!它是Angular 2 Beta版

Angular RC 版本的代码如下所示：

@Pipe({ name: 'filter' })
export class FilterPipe {
  transform(value, term) {
    if (!term) return value;
    return value.filter(item => item.indexOf(term) > -1);
  }
}

angular2过滤问题

1 个答案: