Angular2：當存在用於對象

的內屬性的變化修改對象的內部屬性，如下Angular2：當存在用於對象

delete this.siteConfig.sites[siteKey].serverIpWhitelist[ip];

與ngFor列表綁定不被更新後重新呈現組件。我試過NgZone.run()和ChangeDetectorRef.detectChanges()，都不行。

我發現更新列表的唯一方法是添加以下行

this.siteConfig = JSON.parse(JSON.stringify(this.siteConfig));

很愚蠢的，有沒有其他的方式來強制重新呈現組件？

UPDATE：

的ngFor通過KeysPipe

@Pipe({name: 'keys'}) 
export class KeysPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
    let keys = []; 
    for (let key in value) { 
     keys.push({key: key, value: value[key]); 
    } 
    return keys; 
    } 
}

循環對象的屬性和ngFor看起來像*ngFor="let pair of (siteConfig.sites | keys)"

來源

2016-09-06 Mr.Wang from Next Door

'this.siteConfig = this.siteConfig.slice（）'也應該這樣做。 '* ngFor'檢查數組內容的變化，因此我想我們需要更多的細節來診斷問題。 –

'siteConfig'不是'Array'，它是一個對象，'ngFor'通過管道將對象轉換爲數組 –

你可以讓你管不純。

@Pipe({name: 'keys', pure: false})

這種方式每次檢測到變化時都會調用管道，無論是否有變化。你應該確保管道工作效率高，因爲這種方式很經常。

來源

2016-09-07 04:14:39

似乎效率不高。在將'pure'設置爲'true'後，頁面會出現問題並且Firefox會彈出警告框，表示腳本繼續運行 –

您需要確保'transform（）'不會做不必要的工作。您可以使用IterableDiffer（https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html，https://angular.io/docs/js/latest/api/core/ index/IterableDiffers-class.html）來檢查數組是否真的發生了變化，如果不是，則返回前一次調用的緩存結果。 –

Angular2：當存在用於對象

回答

相關問題