因为之前一直是用的vue,最近开始研究学习angular,跟大家分享一下我的学习研究的小心得,不对之处,敬请指正,谢谢大家。
首先创建一个ts文件来实现我们的自定义管道方法:目前我的过滤需求是在ngFor时实现数据去重,这个管道类实现了 PipeTransform接口的 transform 方法,该方法接受一个value数组过滤去重返回一个数组。首先通过 @Pipe装饰器来告诉 Angular这是一个管道,这个 @Pipe 装饰器允许你定义管道的名字,例如我的管道名字就叫cutemore,需要注意的是,我们必须把这个管道添加到 AppModule 的 declarations 数组中,手动注册自定义管道,不然使用的时候是找不到你的管道方法的。
自定义管道方法注册好了后接下来就是研究一下该如何使用了,首先我设置一个setList方法去处理我接口接收回来(省略,我这里随便模拟一个)的list数据,然后在ngOnInit生命周期中执行。然后在要过滤的地方使用:数据|过滤方法名称,这里跟vue的的使用方法是一致的。
最后展示一下实现效果,每一个下拉框中的重复数据都被已经被过滤掉了。
网友评论