ngFor - After initial display the array is being modifed but the changes does not shows in view
<p>I have an array which is returned from server and displays the items by using *ngFor in a table.  After I process the selected item then I will delete it from the array. The view does not removed the deleted item automatically.  However, if click on the sort function from the table header, the deleted item will be removed from the view.  I know the I need to notify the view that array has been change even thought the array has been update internally.  But I could not find way to make it works. I hope someone could give me a hint.  Thank you.</p>

<pre><code>Patient.ts
    public _records: Array&lt;CRCasesLite&gt;;

    constructor(private router: Router, 
                private route: ActivatedRoute) {
                this._records = this.route.snapshot.data['crCasesLite'];
    }

    onActivateRecord(record: CRCasesLite, index: number): void {
        ...
        if (index &gt; -1) {
                    this._records.splice(index, 1);;
        }
    }


Patients.html
    &lt;th class="input-sm"&gt;Patient &lt;a (click)="oby=['PatientName']" class="fa fa-caret-up fa-2x"&gt;&lt;/a&gt;  &lt;a (click)="oby=['-PatientName']" class="fa fa-caret-down fa-2x"&gt;&lt;/a&gt;&lt;/th&gt;

    &lt;tr *ngFor="let record of _records | orderBy : oby ? oby : ['']; let i = index; trackBy:index"&gt;
       &lt;td class="input-sm"&gt;{{record.PatientName}} {{record.Id}}&lt;/td&gt;
       &lt;td&gt;&lt;a class="link btn btn-primary fa fa-plus-square" (click)="onActivateRecord(record, i)"&gt;&lt;/a&gt;&lt;/td&gt;
</code></pre>