第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Angular2更改檢測:ngOnChanges未針對嵌套對象觸發(fā)

Angular2更改檢測:ngOnChanges未針對嵌套對象觸發(fā)

慕尼黑8549860 2019-08-12 15:53:17
Angular2更改檢測:ngOnChanges未針對嵌套對象觸發(fā)我知道我不是第一個問這個的人,但我在前面的問題中找不到答案。我有一個組件<div class="col-sm-5">     <laps         [lapsData]="rawLapsData"         [selectedTps]="selectedTps"         (lapsHandler)="lapsHandler($event)">     </laps></div><map     [lapsData]="rawLapsData"     class="col-sm-7"></map>在控制器中rawLapsdata不時變異。在laps,數(shù)據(jù)以表格格式輸出為HTML。每當(dāng)rawLapsdata發(fā)生變化時,這都我的map組件需要ngOnChanges用作在Google地圖上重繪標(biāo)記的觸發(fā)器。問題是當(dāng)rawLapsData父項中的更改時,ngOnChanges不會觸發(fā)。我能做什么?import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';@Component({     selector: 'map',     templateUrl: './components/edMap/edMap.html',     styleUrls: ['./components/edMap/edMap.css']})export class MapCmp implements OnInit, OnChanges {     @Input() lapsData: any;     map: google.maps.Map;     ngOnInit() {         ...     }     ngOnChanges(changes: { [propName: string]: SimpleChange }) {         console.log('ngOnChanges = ', changes['lapsData']);         if (this.map) this.drawMarkers();     }更新: ngOnChanges不起作用,但看起來好像正在更新lapsData。在ngInit中,還有一個用于縮放更改的事件偵聽器,它也會調(diào)用this.drawmarkers。當(dāng)我改變變焦時,我確實看到了標(biāo)記的變化。所以唯一的問題是我在輸入數(shù)據(jù)發(fā)生變化時沒有收到通知。在父母,我有這條線。(回想一下,變化反映在圈數(shù)中,但不反映在地圖中)。this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);請注意,this.rawLapsData它本身是指向大型json對象中間的指針this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;
查看完整描述

3 回答

?
米琪卡哇伊

TA貢獻1998條經(jīng)驗 獲得超6個贊

rawLapsData 繼續(xù)指向同一個數(shù)組,即使您修改了數(shù)組的內(nèi)容(例如,添加項目,刪除項目,更改項目)。

在更改檢測期間,當(dāng)Angular檢查組件的輸入屬性以進行更改時,它(基本上)===使用臟檢查。對于數(shù)組,這意味著對數(shù)組引用(僅)進行臟檢查。由于rawLapsData數(shù)組引用沒有改變,ngOnChanges()因此不會被調(diào)用。

我可以想到兩種可能的解決方案:

  1. 實現(xiàn)ngDoCheck()并執(zhí)行您自己的更改檢測邏輯,以確定數(shù)組內(nèi)容是否已更改。(Lifecycle Hooks doc有一個例子。)

  2. 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ù)組輸入屬性具有相同的行為。


查看完整回答
反對 回復(fù) 2019-08-12
?
寶慕林4294392

TA貢獻2021條經(jīng)驗 獲得超8個贊

不是最干凈的方法,但每次更改值時都可以克隆對象?

   rawLapsData = Object.assign({}, rawLapsData);

我想我更喜歡這種方法而不是實現(xiàn)你自己的方法,ngDoCheck()但也許像@GünterZ?chbauer這樣的人可能會參與其中。


查看完整回答
反對 回復(fù) 2019-08-12
?
慕斯王

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);

不適合我。我希望這有幫助。


查看完整回答
反對 回復(fù) 2019-08-12
  • 3 回答
  • 0 關(guān)注
  • 1946 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號