角度異步和事件意外重新評估Observable

我的組件利用Hot BehaviorSubject觀察通過http檢索的集合，但爲了簡單起見，我將創建一個基本的BehaviorSubject驅動列表。角度異步和事件意外重新評估Observable

[剪斷]

該工程完全按照預期。

讓我們做一些事情的結果，將事件添加到列表中的項目（點擊或鼠標懸停等）

<li 
    *ngFor="let label of labels | async" 
    (mouseover)="listMouseover()" 
    > 

     <span>{{convertString(label.title)}}</span> 

    </li>

...

convertString(s:string) { 

    console.log("evaluating string", s); 
    return s + "!"; 

}

什麼，你會看到（！）是每當任何事件被觸發時，Observable的getter現在被擊中，並且（更糟糕）整個列表被重建。如果這很貴，這可能是一個問題，特別是對於像鼠標懸停這樣的東西。

[編輯 - 異步部分是不相關的，與任何名單發生]

你如何減輕這種行爲，特別是如果迴流是昂貴？

謝謝。 Plunkr here。

來源

2017-05-08 Party Ark

是的，它是預期的行爲。 Angular在每個更改檢測週期後執行模板表達式。 – yurzui

謝謝我編輯了這個問題以反映異步在這裏不相關的事實。 –

在您的*ngFor使用trackBy。

https://angular.io/docs/ts/latest/guide/template-syntax.html（ctrl + F trackBy）。

這將允許您指定一個標識符，這樣如果標識符仍然存在，Angular將不會拆卸並重新創建DOM元素。

對於可觀察的問題，您可以創建一個簡單的緩存，以便在觸發事件時不會產生昂貴的操作。

這樣的一個例子是在這裏：

http://www.syntaxsuccess.com/viewarticle/caching-with-rxjs-observables-in-angular-2.0

來源

2017-05-08 18:12:56 chrispy

角度異步和事件意外重新評估Observable

回答

相關問題