ngFor trackBy stil重新渲染DOM？

我在我的ngFor中激活了trackBy，我确认它被调用并正在工作，但我仍然注意到DOM在我的浏览器中重新渲染，导致行闪烁。这里发生了什么？在Angular1中，我可以在我的浏览器/ chrome调试器中看到，在使用item.id使用track时没有更新/替换DOM，并且没有闪烁，为什么在angular2中不会出现这种情况。在我的代码中是否存在一些错误，或者是在引擎盖下发生了什么，我不知道实际上做了什么好事？ngFor trackBy stil重新渲染DOM？

<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); 
}

解

解决与使用相同的可观察到的this.items而不是用一个新的替换它的每个I重新加载新的数据的时间。

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

来源

2016-10-22 jonassvensson

您可以发布您的整个代码吗？ – Bazinga

我不知道你是如何实施变革的功能，但我已经实现了这个代码，并能正常工作：

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>

当您单击添加按钮，您将在devtools看到 - >检查元素只有添加的项目闪烁。

Working plunker

来源

2016-10-22 20:31:34 Bazinga

我证实了这个工作。如果我只是使用Observable.of（[...]）将静态数据添加到我的列表中，而不是从我的API服务中添加静态数据，我可以确认它正在工作。我正在更新我的问题。 – jonassvensson

@patrickjane漂亮的演示。 – micronyks

ngFor trackBy stil重新渲染DOM？

回答

相关问题