3 回答

TA貢獻1998條經驗 獲得超6個贊
rawLapsData
繼續指向同一個數組,即使您修改了數組的內容(例如,添加項目,刪除項目,更改項目)。
在更改檢測期間,當Angular檢查組件的輸入屬性以進行更改時,它(基本上)===
使用臟檢查。對于數組,這意味著對數組引用(僅)進行臟檢查。由于rawLapsData
數組引用沒有改變,ngOnChanges()
因此不會被調用。
我可以想到兩種可能的解決方案:
實現
ngDoCheck()
并執行您自己的更改檢測邏輯,以確定數組內容是否已更改。(Lifecycle Hooks doc有一個例子。)rawLapsData
每當您對數組內容進行任何更改時,都會分配一個新數組。然后ngOnChanges()
將調用因為數組(引用)將顯示為更改。
在你的回答中,你提出了另一個解決方案。
在OP上重復一些評論:
我仍然沒有看到如何
laps
能夠接受改變(當然它必須使用與ngOnChanges()
自身相當的東西?)而map
不能。
在
laps
組件中,您的代碼/模板遍歷lapsData
數組中的每個條目,并顯示內容,因此在顯示的每個數據上都有Angular綁定。即使Angular沒有檢測到組件輸入屬性的任何更改(使用
===
檢查),它仍然(默認情況下)臟檢查所有模板綁定。當其中任何一個發生變化時,Angular將更新DOM。這就是你所看到的。該
maps
組件可能在其模板中沒有任何綁定到其lapsData
輸入屬性,對吧?這可以解釋不同之處。
請注意,lapsData
在組件和rawLapsData
父組件中都指向相同/一個數組。因此,即使Angular沒有注意到對lapsData
輸入屬性的任何(引用)更改,組件“get”/看到任何數組內容更改,因為它們共享/引用該一個數組。我們不需要Angular來傳播這些更改,就像我們使用基本類型(字符串,數字,布爾值)一樣。但是對于原始類型,對值的任何更改都將始終觸發ngOnChanges()
- 這是您在答案/解決方案中利用的內容。
正如您可能已經想到的那樣,對象輸入屬性與數組輸入屬性具有相同的行為。

TA貢獻2021條經驗 獲得超8個贊
不是最干凈的方法,但每次更改值時都可以克隆對象?
rawLapsData = Object.assign({}, rawLapsData);
我想我更喜歡這種方法而不是實現你自己的方法,ngDoCheck()
但也許像@GünterZ?chbauer這樣的人可能會參與其中。

TA貢獻1864條經驗 獲得超2個贊
作為Mark Rajcok第二個解決方案的延伸
每當對數組內容進行任何更改時,都會為rawLapsData分配一個新數組。然后將調用ngOnChanges(),因為數組(引用)將顯示為更改
您可以像這樣克隆數組的內容:
rawLapsData = rawLapsData.slice(0);
我提到這個是因為
rawLapsData = Object.assign({},rawLapsData);
不適合我。我希望這有幫助。
- 3 回答
- 0 關注
- 1949 瀏覽
添加回答
舉報