更改檢測不註冊數據更改

我有一個組件內部組件的HTML結構（忘記了適當的單詞）。更改檢測不註冊數據更改

basicly這樣工作（大大簡化）：

主要的html：

<div *ngFor="let item of data"> 
    <app-item [item]="item"></app-item> 
</div> 

<button (click)="addItem()">Add</button>

項目的html：

<div>{{item.name}}</div> 

<button (click)="deleteItem()">Delete</button>

應用項目中我展示幾個項目從列表。該列表通過http.get請求直接從數據庫中獲取數據。

現在我還可以添加或刪除兩個工作項目（項目分別添加到數據庫或從數據庫中刪除項目）。儘管更改檢測沒有選擇任何項目，並且需要刷新站點（例如，通過F5）以顯示更改。

我檢查了代碼（不是全部來自我），也找不到任何指定的更改檢測策略。

我還嘗試通過ChangeDetectorRef（this.ref.detectChanges();）手動調整添加和刪除功能中的變化檢測。儘管這也沒有消除手動刷新頁面以查看更改的需要。

現在我缺少什麼改變檢測來挑選它？或者，如何在添加/刪除方法中手動觸發它？

來源

2017-08-04 m41n

_change檢測不挑它的任何_ - 什麼做你期望發生？ 'addItem'和'deleteItem'做什麼？ –

它調用服務，http.post和http.delete請求，因爲數據來自http.get我認爲變化檢測會撿起來 – m41n

@ m41n那麼Angular不會自動激發你沒有告訴角的請求去做。因此，您需要激發'get'請求以從後端獲取「更新」數據。 – Alex

由於您正在添加或刪除現有數組中的元素，角度無法挑選更改。

對於這個工作，你可以像使用數組的相同元素的新對象

分配數組引用作爲items= items.slice();
或者你可以使用Object.assign方法items= Object.assign([],items);
這兩個東西應該是在對數組進行更改後完成。

手動火災變化檢測可以遵循回答on this link： -

進樣ChangeDetectorRef在組件，然後手動使用該對象的detectChanges()方法火災變化檢測。像

constructure(private cd: ChangeDetectorRef()){} 
someMethod(){ 
    cd.detectChanges(); 
}

來源

2017-08-04 07:08:43

ChangeDetectorRef的第二個選項，我居然嘗試過。沒有帶來想要的結果 – m41n

您可以嘗試第一個選項，因爲如果您通過角度文檔更改檢測機制。它提到，如果你添加數組中的元素或從數組中移除元素，變化檢測可能不會被自動觸發。因爲你沒有改變它指向相同引用的對象。所以嘗試通過使用切片或使用Object.assign來分配一個新的對象。你可以找到更好的描述，在回答這個問題https://stackoverflow.com/questions/34796901/angular2-change-detection-ngonchanges-not-firing-for-nested-object –

有點晚回答，但我基本做了現在是第一個選項，在刪除時從「local」數組添加和拼接時推入「local」數組。棘手的部分是刪除是在一個子組件上完成的，我不知道當我通過@Input傳遞數組時，我可以直接在子組件中處理它。無論如何，晚點再好，永遠不會，接受答案。 – m41n

添加ChangeDetectionStrategy這可能會解決您的問題，但在GENRAL應該拿起角可能是別的東西纏着你的代碼

@Component({ 
    // ... 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class MovieComponent { 
    // ... 
}

來源

2017-08-04 07:24:11

我不完全確定，但與OnPush其他地方的變化檢測確實觸發的代碼中可能不再工作 – m41n

雅我想你需要強制更改檢測，但我希望你正在使用組件的具體邏輯 –

上面的答案中的Prathmesh Dali實際上使我想到了一種可能的解決方案，我現在正在嘗試將每個http服務的新數據發送到數據庫，同時操作數據數組的「本地副本」爲變化檢測拿起 – m41n

更改檢測不註冊數據更改

回答

相關問題