美文网首页
初学angular并尝试使用自定义管道进行数据过滤

初学angular并尝试使用自定义管道进行数据过滤

作者: 纪念逝去的流年_1c1c | 来源:发表于2020-05-02 15:26 被阅读0次

            因为之前一直是用的vue,最近开始研究学习angular,跟大家分享一下我的学习研究的小心得,不对之处,敬请指正,谢谢大家。

            首先创建一个ts文件来实现我们的自定义管道方法:目前我的过滤需求是在ngFor时实现数据去重,这个管道类实现了 PipeTransform接口的 transform 方法,该方法接受一个value数组过滤去重返回一个数组。首先通过 @Pipe装饰器来告诉 Angular这是一个管道,这个 @Pipe 装饰器允许你定义管道的名字,例如我的管道名字就叫cutemore,需要注意的是,我们必须把这个管道添加到 AppModule 的 declarations 数组中,手动注册自定义管道,不然使用的时候是找不到你的管道方法的。

           自定义管道方法注册好了后接下来就是研究一下该如何使用了,首先我设置一个setList方法去处理我接口接收回来(省略,我这里随便模拟一个)的list数据,然后在ngOnInit生命周期中执行。然后在要过滤的地方使用:数据|过滤方法名称,这里跟vue的的使用方法是一致的。

    最后展示一下实现效果,每一个下拉框中的重复数据都被已经被过滤掉了。

    相关文章

      网友评论

          本文标题:初学angular并尝试使用自定义管道进行数据过滤

          本文链接:https://www.haomeiwen.com/subject/wcwthqtx.html