title: angular ngFor trackBy does not work as I expected
body: <p>When I read the doc (<a href="https://angular.io/api/common/NgForOf" rel="noreferrer">https://angular.io/api/common/NgForOf</a>) for <code>ngFor</code> and <code>trackBy</code>, I thought I understood that Angular would only redo the DOM if the value returned by the trackBy function is changed, but when I played with it here (<a href="https://stackblitz.com/edit/angular-playground-bveczb" rel="noreferrer">https://stackblitz.com/edit/angular-playground-bveczb</a>), I found I actually don't understand it at all. Here's the essential part of my code:</p>
  
  <pre><code>export class AppComponent {
    data = [
      { id: 1, text: 'one' },
      { id: 2, text: 'two' },
      { id: 3, text: 'three' },
    ];
  
    toUpper() {
      this.data.map(d =&gt; d.text = d.text.toUpperCase());
    }
  
    trackByIds (index: number, item: any) {
      return item.id; 
    };
  }
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>&lt;div *ngFor="let d of data; trackBy: trackByIds"&gt;
    {{ d.text }}
  &lt;/div&gt;
  &lt;button (click)=toUpper()&gt;To Upper Case&lt;/button&gt;
  </code></pre>
  
  <p>What I expected was clicking the button should <strong>NOT</strong> change the list from lower case to upper, but it did. I thought I used the <code>trackByIds</code> function for the <code>trackBy</code> in the <code>*ngFor</code>, and since the <code>trackByIds</code> only checks the <code>id</code> property of the items, so the change of anything other than id should not cause the DOM to be redone. I guess my understanding is wrong.</p>