title: Angular 2: array.splice() is removing the elements from DOM
body: <p>I have an html table and it has default checked rows.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;Id&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Initial&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr *ngFor="let name of names; let i = index"&gt;
          &lt;td&gt;&lt;input type="checkbox" [checked]="chk" (change)="onTaChange(name, $event.target.checked,i)"&gt;&lt;/td&gt;
          &lt;td&gt;{{name.id}}&lt;/td&gt;
          &lt;td&gt;{{name.Fname}}&lt;/td&gt;
          &lt;td&gt;{{name.Initial}}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I'm forming one more array for to contain unchecked/checked objects. So in onTaChange() method I'm passing the index in splice() and want to remove the object at that index(unchecked row in the table). But rows(objects) are getting removed if I uncheck even though they both are different arrays of objects.</p>
  
  <p>What I want is, have a second array with only checked/unchecked rows of objects. Any help on this?  </p>
  
  <p><a href="https://plnkr.co/edit/DD1EqbtVwy2VFA9zbR1d?p=preview" rel="nofollow noreferrer">Plunker</a></p>