初學angular并嘗試使用自定義管道進行數(shù)據(jù)過濾

? ? ? ? 因為之前一直是用的vue,最近開始研究學習angular,跟大家分享一下我的學習研究的小心得,不對之處,敬請指正,謝謝大家。

? ? ? ? 首先創(chuàng)建一個ts文件來實現(xiàn)我們的自定義管道方法:目前我的過濾需求是在ngFor時實現(xiàn)數(shù)據(jù)去重,這個管道類實現(xiàn)了?PipeTransform接口的?transform?方法,該方法接受一個value數(shù)組過濾去重返回一個數(shù)組。首先通過?@Pipe裝飾器來告訴 Angular這是一個管道,這個?@Pipe?裝飾器允許你定義管道的名字,例如我的管道名字就叫cutemore,需要注意的是,我們必須把這個管道添加到?AppModule?的?declarations?數(shù)組中,手動注冊自定義管道,不然使用的時候是找不到你的管道方法的。

? ? ? ?自定義管道方法注冊好了后接下來就是研究一下該如何使用了,首先我設置一個setList方法去處理我接口接收回來(省略,我這里隨便模擬一個)的list數(shù)據(jù),然后在ngOnInit生命周期中執(zhí)行。然后在要過濾的地方使用:數(shù)據(jù)|過濾方法名稱,這里跟vue的的使用方法是一致的。

最后展示一下實現(xiàn)效果,每一個下拉框中的重復數(shù)據(jù)都被已經(jīng)被過濾掉了。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容