溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

angular 8.1使用教程

發(fā)布時間:2020-11-26 15:07:04 來源:億速云 閱讀:170 作者:Leah 欄目:開發(fā)技術(shù)

本篇文章為大家展示了angular 8.1使用教程,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。

首先是勾選狀態(tài)的保持問題

angular 8.1使用教程

在模板中思考了很久,用了各種方法,修改傳入值,頁碼改變以后勾選狀態(tài)就是會有奇怪的問題,比如在代碼里明明把選中的給去掉了,但是頁面上還是勾選狀態(tài),最后折騰來折騰去,發(fā)覺操作的對象不對:頁面上的是模板里面的list,就是listpagemodel.list,而我之前一直在操作傳入的list,后面操作對象弄對了,只需要操作listpagemodel.list的狀態(tài)就可以控制頁面上的數(shù)據(jù)。

所以上面給我的經(jīng)驗(yàn)就是一定要明白頁面上展示的數(shù)據(jù)具體是由哪個對象控制的,對象找對了,控制起來就簡單,對象沒找對,忙活再久也是白干。

第二個就是自己創(chuàng)建的組件問題

angular 8.1使用教程

sl-upload是我自己封裝的一個組件

angular 8.1使用教程

這是組件內(nèi)部的代碼,很簡單,就是包含了nz的一個上傳組件,還有一些數(shù)據(jù)的處理

angular 8.1使用教程

比如上傳之前的判斷大小和類型,還有上傳成功的提示之類的。

之所以自己寫這部分,是因?yàn)閚zzorro的組件自己雖然有提供大小控制和上傳文件的類型控制,但是限制了以后選中保持以后不會有任何提示。所以就自己封裝一下,加上了提示。

其中遇到的一個不解的問題就是雙向綁定的問題

一開始我單純的以為只要給[fileList]加上小括號就行

[(fileList)]這樣就變成了雙向綁定,實(shí)際上并沒有,小括號加上去以后毫無作用,組件內(nèi)部只是接收到了這個fileList

angular 8.1使用教程

后續(xù)的操作,父組件(嚴(yán)格來講其實(shí)包了三層,是祖孫組件了)里面是拿不到子組件對fileList的修改的,因?yàn)橹皇菃渭兊膫魅肓诉@個值?,F(xiàn)在要拿子組件對fileList修改后的值,就需要加上輸出,也就是@Output

angular 8.1使用教程

下圖的那一行代碼

this.fileListChange.emit(this.fileList)

angular 8.1使用教程

就是輸出用的,只有改變值的時候加上了這一行代碼,才算是完成了輸出

才讓父組件中[(fileList)]中的小括號有了意義,不然加不加小括號都沒影響。

這樣才可以在父組件中拿到經(jīng)過子組件修改后的fileList的值了。

上述內(nèi)容就是angular 8.1使用教程,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI