angular2过滤问题

Posted 2023-03-13

【中文标题】angular2过滤问题

【英文标题】：angular2 filtering issue

【发布时间】：2016-10-18 13:00:24

【问题描述】：

我正在尝试在 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>

运行此代码时的问题是，它仅在输入第一个字母时有效（过滤），一旦输入更多字母，它将无法工作。有什么帮助吗？

【参考方案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);
  

【讨论】：

现在我看到了问题，非常感谢，而且我的过滤器代码也将数组更改为对象并且它可以工作