ngFor trackBy stil re-rendering DOM?
<p>I activated trackBy in my ngFor and i confirmed that it is called and working, but I still notice the DOM is re-rendered in my browser which cause the rows to flicker. What is happening here? In Angular1 I can see in my browser/chrome debugger that the DOM isn't updated/replaced when using track by item.id and no flicker occurs, why isn't this the case in angular2. Is there some error in my code or does stuff happen under the hood that I am not aware off actually doing something good?</p>

<pre><code>    &lt;tr *ngFor="let item of items| async; trackBy:itemTrackBy"&gt;

    itemTrackBy(index: number, item: MyItem) {
        return item.id;
    }
</code></pre>

<p><strong>EDIT</strong>
I tracked the error to be in the observable in my API service causing this, but still don't know why.</p>

<pre><code>this.items= this.apiService.getItems(searchText).share();


getItems(search?: string): Observable&lt;Item[]&gt; {
    let searchParams = new URLSearchParams();
    if (search) {
        searchParams.set('searchText', search);
    }
    return this.http
        .get(API_BASE_URL + '/items', {search: searchParams})
        .map(response =&gt; response.json())
        .catch(this.handleError);
}
</code></pre>

<p><strong>Solution</strong></p>

<p>Solved with using the same observable this.items instead of replacing it with a new one each time I reload new data.</p>

<pre><code>this.items = Observable.concat(Observable.of(''), this.searchInput.valueChanges)
            .debounceTime(200)
            .map((value:string) =&gt; value.trim())
            .distinctUntilChanged()
            .switchMap(search =&gt; this.apiService.getItems(searchText);
</code></pre>