ngFor で trackBy を有効にし、それが呼び出されて機能していることを確認しましたが、ブラウザーで DOM が再レンダリングされ、行がちらつくことにまだ気付きます。ここで何が起きてるの?Angular1 では、ブラウザー/Chrome デバッガーで、item.id によるトラックを使用しているときに 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 を使用することで解決しました。
this.items = Observable.concat(Observable.of(''), this.searchInput.valueChanges)
.debounceTime(200)
.map((value:string) => value.trim())
.distinctUntilChanged()
.switchMap(search => this.apiService.getItems(searchText);