3

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

1 に答える 1