数组 – 以angle2过滤数组

发布时间：2020-12-17 08:05:12 所属栏目：安全来源：网络整理

导读：我正在研究如何在Angular2中过滤数据数组。我研究了使用自定义管道，但我觉得这不是我正在寻找的，因为它似乎更适合简单的演示文稿转换，而不是过滤大量的数据。阵列如下所示： getLogs(): ArrayLogs { return [ { id: '1',plate: 'plate1',time: 20 },{ i

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

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

阵列如下所示：

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

我想通过id过滤这个。所以当我在搜索栏中输入“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>
  `
})

希望它能帮助你，蒂埃里

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!