title: *ngFor in Angular 4 returns the following error on .shift(): Uncaught TypeError: Cannot read property 'destroyed' of null
body: <p>When I remove the first element in my array of objects, I receive the error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'destroyed' of null.</p>
  </blockquote>
  
  <p>Where is this coming from?</p>
  
  <hr>
  
  <p>My html page:</p>
  
  <pre><code>&lt;ion-list&gt;
      &lt;ion-item *ngFor="let s of this.lastScores"&gt;
          &lt;ion-label&gt;
              &lt;ion-grid&gt;
                  &lt;ion-row &gt;
                      &lt;ion-col size="3"&gt;
                          {{s.score}}
                      &lt;/ion-col&gt;
                      &lt;ion-col size="3"&gt;
                          {{s.totalScore}}
                      &lt;/ion-col&gt;
                      &lt;ion-col size="6"&gt;
                          &lt;small&gt;{{s.newText}}&lt;/small&gt;
                      &lt;/ion-col&gt;
                  &lt;/ion-row&gt;
              &lt;/ion-grid&gt;
          &lt;/ion-label&gt;
      &lt;/ion-item&gt;
  
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>I add items to the front as follows:</p>
  
  <pre><code>this.lastScores.unshift({
      'score':      1,
      'newText':    'hello',
      'totalScore': 10,
  })
  </code></pre>
  
  <p>And delete them as follows:</p>
  
  <pre><code>this.lastScores.shift();
  this.ref.detectChanges();
  </code></pre>
  
  <p>I use <code>this.ref.detectChanges()</code> from the constructor <code>private ref: ChangeDetectorRef</code> as the function is called after a .subscribe and need to update the DOM.</p>