ngFor trackBy 仍然重新渲染 DOM？

Question

我在我的 ngFor 中激活了 trackBy，我确认它已被调用并正常工作，但我仍然注意到 DOM 在我的浏览器中重新呈现，这导致行闪烁。这里发生了什么？在 Angular1 中，我可以在我的 browser/chrome 调试器中看到 DOM 在使用 item.id 跟踪时不是 updated/replaced 并且没有发生闪烁，为什么不是这种情况角度2。我的代码中是否存在某些错误，或者是否在幕后发生了我没有意识到的事情实际上做了一些好事？

    <tr *ngFor="let item of items| async; trackBy:itemTrackBy">

    itemTrackBy(index: number, item: MyItem) {
        return item.id;
    }

编辑我跟踪到我的 API 服务中的可观察到的错误导致了这个，但仍然不知道为什么。

this.items= this.apiService.getItems(searchText).share();


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

解决方案

解决了使用相同的 observable this.items 而不是每次重新加载新数据时都用新的 observable 替换它的问题。

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

Answer 1

我不确定你是如何实现更改功能的，但我已经实现了这段代码并且工作正常：

export class AppComponent {
  episodes = Observable.of([
    { title: 'Winter Is Coming', id: 0 }
  ]);

  add() {
    this.episodes =  Observable.of([
      { title: 'Winter Is Coming', id: 0 },
      { title: 'The Kingsroad', id: 1 }
    ])
  }

  itemTrackBy(index: number, item) {
    return item.id;
  }
}

<button (click)="add()">Add</button>
<ul>
  <li *ngFor="let episode of episodes | async; trackBy: itemTrackBy">
    {{episode.title}}
  </li>
</ul>

当您点击添加按钮时，您将在开发工具 -> 检查元素中看到只有添加的项目闪烁。

Working plunker

ngFor trackBy 仍然重新渲染 DOM？

ngFor trackBy stil re-rendering DOM?

angularjs-track-by

ngfor

angular