angular2 – 如何应用过滤器* ngFor

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

导读：显然，Angular2将使用管道而不是过滤器，如在Angular1中的拥塞与ng-for过滤结果，执行仍然似乎是模糊的，没有明确的文档。也就是说，我想要实现的是从以下前提看 div *ng-for="#item of itemsList" *ng-if="conditon(item)"/div 如何实现这样使用管道？基

显然，Angular2将使用管道而不是过滤器，如在Angular1中的拥塞与ng-for过滤结果，执行仍然似乎是模糊的，没有明确的文档。

也就是说，我想要实现的是从以下前提看

<div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div>

如何实现这样使用管道？

基本上，你写一个管道，然后你可以在* ngFor指令中使用。

在您的组件：

filterargs = {title: 'hello'};
items = [{title: 'hello world'},{title: 'hello kitty'},{title: 'foo bar'}];

在您的模板中，您可以将字符串，数字或对象传递到您的管道以用于过滤：

<li *ngFor="#item of items | myfilter:filterargs">

在你的管道：

@Pipe({
    name: 'myfilter',pure: false
})
@Injectable()
export class MyFilterPipe implements PipeTransform {
    transform(items: any[],args: any[]): any {
        // filter items array,items which match and return true will be kept,false will be filtered out
        return items.filter(item => item.title.indexOf(args[0].title) !== -1);
    }
}

Ps。为了简单起见，我在此示例中跳过了对象输入，但是您将有一个具有id，title，date等的对象，您可以使用filterargs对象对函数应用几个检查。

（编辑：李大同）

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