数组 – 以angle2过滤数组

前端之家收集整理的这篇文章主要介绍了数组 – 以angle2过滤数组前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在研究如何在Angular2中过滤数据数组。

我研究了使用自定义管道,但我觉得这不是我正在寻找的,因为它似乎更适合简单的演示文稿转换,而不是过滤大量的数据。

阵列如下所示:

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

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

如果有一个如何做到这一点的方法,我很想知道!

没有办法使用默认管道。以下是默认支持的管道列表: https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/common_pipes.ts

那就是说你可以轻松地添加一个这样的用例的管道:

  1. import {Injectable,Pipe} from 'angular2/core';
  2.  
  3. @Pipe({
  4. name: 'myfilter'
  5. })
  6. @Injectable()
  7. export class MyFilterPipe implements PipeTransform {
  8. transform(items: any[],args: any[]): any {
  9. return items.filter(item => item.id.indexOf(args[0]) !== -1);
  10. }
  11. }

并使用它:

  1. import { MyFilterPipe } from './filter-pipe';
  2. (...)
  3.  
  4. @Component({
  5. selector: 'my-component',pipes: [ MyFilterPipe ],template: `
  6. <ul>
  7. <li *ngFor="#element of (elements | myfilter:'123')">(...)</li>
  8. </ul>
  9. `
  10. })

希望它能帮助你,蒂埃里

猜你在找的Angularjs相关文章