3 回答

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

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

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