title: ngFor and trackBy with async data from API still re-rendering DOM?
body: <p>I want to use <code>ngFor</code> with <code>async</code> data (loaded from API) and <code>trackBy</code> to improve performance and to update list without DOM flashing/flickering when data updates.</p>
  
  <p>If data is static - everything works fine. But when i try to use data loaded from API - <code>trackBy</code> doesn't work.</p>
  
  <h3>LIVE</h3>
  
  <p>from API: <a href="https://stackblitz.com/edit/angular-hx4p39" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-hx4p39</a><br/>
  static data: <a href="https://stackblitz.com/edit/angular-myb6vj" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-myb6vj</a></p>
  
  <h3>Component</h3>
  
  <pre><code>export class AppComponent {
  
    constructor(private http: HttpClient){}
  
    comments$: Observable&lt;Comment[]&gt; = this.http.get&lt;Comment[]&gt;(`https://jsonplaceholder.typicode.com/comments?_start=0&amp;_limit=5`);
  
    add() {
      this.comments$ = this.http.get&lt;Comment[]&gt;(`https://jsonplaceholder.typicode.com/comments?_start=0&amp;_limit=6`);
    }
  
    edit() {
      this.comments$ = this.comments$.pipe(
        map(comments =&gt; {
          comments.map( comment =&gt; {
            if(comment.id === 5){ comment.name = 'edit'; }
            return comment;
          });
          return comments;
        })
      );
    }
  
    itemTrackBy(index: number, item: Comment) {
      return item.id;
    }
  }
  
  interface Comment {
    postId;
    id;
    email;
    name;
    body;
  }
  </code></pre>
  
  <h3>Template</h3>
  
  <pre><code>&lt;button (click)="add()"&gt;Make 6&lt;/button&gt;
  OR
  &lt;button (click)="edit()"&gt;edit 5-th element&lt;/button&gt;
  
  &lt;ul&gt;
    &lt;li *ngFor="let comment of (comments$ | async); trackBy: itemTrackBy"&gt;
      {{comment.id}} - {{comment.name}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>