ngFor - After initial display the array is being modifed but the changes does not shows in view

Question

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.

Patient.ts
    public _records: Array<CRCasesLite>;

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

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


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

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

Answer 1

The view needs to be notified the changes in the array. To do that we could use ChangeDetectorRef and ChangeDetectorRef.markForCheck(). Thanks for Marj Rajcok mentioned about detechChanges() in his answers on Angular 2 -View not updating after model changes Angular 2 - View not updating after model changes and the article Angular 2 Change Detection Explained by Pascal Precht http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html Precht article is very detail and simple enough to understand.

These are the codes changes that I made to make the updated array reflected on the *ngFor in

Patient.ts

import {  ChangeDetectorRef  } from "@angular/core";   // <--- added

public _records: Array<CRCasesLite>;

constructor( private cd: ChangeDetectorRef    // <--- added
             ... ) {
            this._records = this.route.snapshot.data['crCasesLite'];
}

onActivateRecord(record: CRCasesLite, index: number): void {
    ...
    if (index > -1) {
        this._records.splice(index, 1);
        this.cd.markForCheck();     // <--- added      
    }
}

Patients.html

<table>
    <th class="input-sm">Patient <a (click)="oby=['PatientName']" class="fa fa-caret-up fa-2x"></a>  <a (click)="oby=['-PatientName']" class="fa fa-caret-down fa-2x"></a></th>
    <th></<th>
    <tr *ngFor="let record of _records | orderBy : oby ? oby : ['']; let i = index; trackBy:index">
          <td class="input-sm">{{record.PatientName}} {{record.Id}}</td>
          <td><a class="link btn btn-primary fa fa-plus-square" (click)="onActivateRecord(record, i)"></a></td>
    </tr>
</table>