在angular2中过滤数组

Posted 2023-03-10

【中文标题】在angular2中过滤数组

【英文标题】：Filtering an array in angular2

【发布时间】：2016-03-28 19:13:03

【问题描述】：

我正在研究如何在 Angular2 中过滤数据数组。

我曾考虑使用自定义管道，但我觉得这不是我想要的，因为它似乎更适合于简单的表示转换，而不是过滤大量数据。

数组设置如下：

getLogs(): Array<Logs> 
        return [
             id: '1', plate: 'plate1', time: 20 ,
             id: '1', plate: 'plate2', time: 30 ,
             id: '1', plate: 'plate3', time: 30 ,
             id: '2', plate: 'plate4', time: 30 ,
             id: '2', plate: 'plate5', time: 30 ,
             id: '2', plate: 'plate6', time: 30 
        ];
    

我想按 id 过滤这个。因此，当我在搜索栏中输入“1”时，它会更新以显示相应的值。

如果有方法可以做到这一点，我很想知道！

【参考方案1】：

使用默认管道无法做到这一点。以下是默认支持的管道列表：https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/common_pipes.ts。

也就是说，您可以轻松地为此类用例添加管道：

import Injectable, Pipe from 'angular2/core';

@Pipe(
    name: 'myfilter'
)
@Injectable()
export class MyFilterPipe implements PipeTransform 
    transform(items: any[], args: any[]): any 
        return items.filter(item => item.id.indexOf(args[0]) !== -1);
    

并使用它：

import  MyFilterPipe  from './filter-pipe';
(...)

@Component(
  selector: 'my-component',
  pipes: [ MyFilterPipe ],
  template: `
    <ul>
      <li *ngFor="#element of (elements | myfilter:'123')">(...)</li>
    </ul>
  `
)

希望对你有帮助 蒂埃里

【讨论】：

PipeTransform 的实现是做什么的？我对它的目的有点困惑。

其实，当你要实现一个管道的时候，你需要实现这个接口，并将你的处理放在transform方法中。有关详细信息，请参阅相应的文档：angular.io/docs/ts/latest/api/core/PipeTransform-interface.html。它的第一个参数对应于列表本身，第二个参数对应于用于过滤列表的元素...

感谢您的解释。最后一个问题是否可以将 *ngFor="#element of (elements | myfilter:'123') 的输出设为变量？

是的，有可能 ;-) 唯一需要注意的是，如果元素列表是使用 HTTP 加载的，那么它就在那里......

我一直在寻找一种方法来做到这一点，但运气不佳。你能为我指出正确的方向吗？真的很感激

【参考方案2】：

我的一个示例中有类似的场景

<input "(keyup)="navigate($event)" />

<div *ngFor="#row of visibleRows"></div>    

......

navigate($event)
        this.model.navigate($event.keyCode);
        this.visibleRows = this.getVisibleRows();


getVisibleRows()
    return this.model.rows.filter((row) => row.rowIndex >= this.model.start && row.rowIndex < this.model.end);

我的方法是在某些合格事件上重新计算数组。就我而言，它是keyup。绑定到函数或过滤器似乎很方便，但建议直接绑定到数组。这是因为每次更改跟踪被触发时，函数/过滤器都会返回一个新的数组实例，无论是什么触发了它。

这里是完整的来源：https://github.com/thelgevold/angular-2-samples/tree/master/components/spreadsheet

我还有一个演示：http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

【讨论】：

我实际上已经发现你的 github 非常有帮助，所以谢谢你！我正在处理的表格很大程度上基于您的网格，使用： 将数组构建到表格中。它对一种新的且文档稀少的语言提供了巨大的帮助。这与问题并没有太大关系，但更多的是个人感谢。

谢谢！我很高兴您发现这些示例很有帮助

“更改跟踪会变得混乱，因为每次触发更改跟踪时函数/过滤器都会返回一个新的数组实例”——非常正确，但是如果你每次都可以返回相同的数组实例使用有状态的管道。或者，如果您的组件允许，您可以将onPush 更改检测策略与有状态管道结合使用。我在this SO answer 讨论这两个选项。