trackBy stil re-rendering DOM？

Question

私はngForでtrackByを有効にしました。私はそれが呼び出され、動作していることを確認しましたが、DOMがブラウザで再描画されて行がちらつくことがわかりました。ここで何が起きてるの？ Angular1では、item.idでトラックを使用しているときにDOMが更新/置換されず、ちらつきが発生しないというブラウザ/クロムデバッガでは、なぜangle2ではそうでないのがわかります。私のコードに何らかのエラーがありますか、何か良いことを実際にやっていることに気付いていないようなものがありますか？

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

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

EDIT 私はこれを引き起こして、私の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); 

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