? ? ? ? 因?yàn)橹耙恢笔怯玫膙ue,最近開(kāi)始研究學(xué)習(xí)angular筷弦,跟大家分享一下我的學(xué)習(xí)研究的小心得幔妨,不對(duì)之處闻镶,敬請(qǐng)指正斥滤,謝謝大家将鸵。
? ? ? ? 首先創(chuàng)建一個(gè)ts文件來(lái)實(shí)現(xiàn)我們的自定義管道方法:目前我的過(guò)濾需求是在ngFor時(shí)實(shí)現(xiàn)數(shù)據(jù)去重勉盅,這個(gè)管道類實(shí)現(xiàn)了?PipeTransform接口的?transform?方法,該方法接受一個(gè)value數(shù)組過(guò)濾去重返回一個(gè)數(shù)組顶掉。首先通過(guò)?@Pipe裝飾器來(lái)告訴 Angular這是一個(gè)管道草娜,這個(gè)?@Pipe?裝飾器允許你定義管道的名字,例如我的管道名字就叫cutemore,需要注意的是痒筒,我們必須把這個(gè)管道添加到?AppModule?的?declarations?數(shù)組中宰闰,手動(dòng)注冊(cè)自定義管道,不然使用的時(shí)候是找不到你的管道方法的簿透。
? ? ? ?自定義管道方法注冊(cè)好了后接下來(lái)就是研究一下該如何使用了移袍,首先我設(shè)置一個(gè)setList方法去處理我接口接收回來(lái)(省略,我這里隨便模擬一個(gè))的list數(shù)據(jù)老充,然后在ngOnInit生命周期中執(zhí)行葡盗。然后在要過(guò)濾的地方使用:數(shù)據(jù)|過(guò)濾方法名稱,這里跟vue的的使用方法是一致的啡浊。
最后展示一下實(shí)現(xiàn)效果觅够,每一個(gè)下拉框中的重復(fù)數(shù)據(jù)都被已經(jīng)被過(guò)濾掉了。