gpt4 book ai didi

angular - ngFor trackBy 还是重新渲染 DOM?

转载 作者:行者123 更新时间:2023-12-04 02:09:20 25 4
gpt4 key购买 nike

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

    <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 而不是每次重新加载新数据时用一个新的替换它来解决。

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

最佳答案

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

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

关于angular - ngFor trackBy 还是重新渲染 DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40196301/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com