Angular2 ngFor在指令回調函數中看不到更新的數據

我已經閱讀了有關如何使角度2檢測系統更新DOM的各種想法，我似乎無法得到這個工作。本質上，我想製作一個無限的滾動條，並且我希望在視圖中聲明的回調函數在適當的時候被指令調用。例如，如果到頁面底部的距離小於50 px，則調用回調，然後更新數據。Angular2 ngFor在指令回調函數中看不到更新的數據

http://plnkr.co/edit/hFCUQCYHprVn1XxcuKnT?p=preview

所以它看起來像這樣：

@Component... 
template: '<div *ngFor="#item in items" infinity-scroller [scrollerCallback]="scrollCallback">{{item}}</div>' 

constructor() { 
    this.items = getMockData(0, 40) 
    this.onScrollCallback = this.onScrollCallback.bind(this) 
} 

addData() { 
    this.items.push(...getMockData(410, 500)) 
} 

onScrollCallback (ctx) { 
    this.items = this.items.concat(getMockData(50, 100)) 
} 

@Directive 
selector: '[infinity-scroller]' 
inputs: ['scrollerCallback'] 

class InfinityScroller 

ngOnInit() { 
    window.onscroll =() => onScroll(this) 
} 

function onScroll (ctx) { 
    ... logic to call the callback function (ie, ctx.scrollerCallback()) 
}

我加入了addData方法測試將數據添加到視圖，該功能完美的作品。我點擊一個按鈕，然後addData將新項目推送到數組和視圖更新。但是，當指令中的回調調用輸入的「scrollCallback」函數時，更新數據不會反映在DOM中。

任何想法，爲什麼會這樣？提前致謝！

來源

2016-03-07 Brian Morton

當只有內容發生變化時，角度更改檢測無法識別陣列或對象上的更改檢測，但不識別數組或對象本身。

this.items.push(...getMockData(410, 500)) 
this.items = this.items.slice(); // add this line to make Angular recognize the change.

如果綁定到項目的屬性Angular也會識別更改。

來源

2016-03-07 06:06:18

嗨Gunter。感謝您的迴應。有兩件事我不清楚在這個問題中，所以很抱歉：1.我嘗試了兩種更新數據的方法：一種是通過data.push（... newData）和兩種數據= data.concat（新數據）。第一個保持相同的參考，第二個創建一個新的。 2.更新僅爲**，不在回調函數內，不在addData方法內。所以我在模板中有一個按鈕來運行addData方法，並且我看到正確添加的數據。但是當回調添加數據時，它會失敗。 –

我試過的另一件事是真的bizare：onScroll事件正確觸發，並調用回調函數，我做this.data.push（... getMockData（）），但視圖不更新。但是，控制檯日誌顯示數據已添加到this.data中。然後，如果我點擊按鈕來運行addData方法，所有數據都會顯示出來！因此，在添加40個項目（如我設置的項目）之後，它顯示了500多個項目，因爲它在滾動和添加新數據期間被稱爲所有時間。 –

有關於此的任何想法？提前致謝！ –

Angular2 ngFor在指令回調函數中看不到更新的數據

回答

相關問題