title: Angular - ngFor and trackBy with async pipe
body: <p>I want to use <code>trackBy</code> to improve performance for a long list. The data for this list should be immutable on change and is provided to the template via an async pipe. Altough I'm using the <code>trackBy</code> functionality, the whole list is rerendered everytime I emit a new value. This happens even though the objects inside the array stay the same with the same <code>id</code>.</p>
  
  <p><strong>Component</strong></p>
  
  <pre><code>export class AppComponent implements OnInit {
    data: Observable&lt;any&gt;;
  
    trackBy(index, item) {
      return item.id;
    }
  
    ngOnInit() {
      const data = interval(100).pipe(mapTo([
        { id: 1 }, { id: 2 }
      ]))
  
      this.data = data.pipe(map(events =&gt; events.map(event =&gt; ({ ...event }))));
    }
  }
  </code></pre>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;div *ngFor="let d of data | async; trackBy: trackBy"&gt;{{d}}&lt;/div&gt;
  </code></pre>
  
  <p>Additionally here is a <a href="https://angular-ttdujw.stackblitz.io/" rel="nofollow noreferrer">StackBlitz</a>. The <code>div</code> tags are rerendered everytime a new value is send to the <code>ngFor</code>.</p>
  
  <p>As I understand <code>trackBy</code> it should detect that the objects are the same (through the id property), altough the reference changed. Or am I missing something obviously?</p>