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>

Community · Accepted Answer · 2017-05-23 12:00:50Z

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>

praveen_sankar · Accepted Answer · 2021-06-09 07:23:45Z

0

if providers:[] is used, make sure you are not using providers[] in each component. If same instance is needed across the components give providers[] only in parent component.

answered Jun 9, 2021 at 7:23

praveen_sankar

111 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related