Search code examples
angularprimengangular4-forms

p-dataTable of primeNG counldnt fetch value from an array of employess /Angular4

It didn't display data of [value]="targetEmployeeonpopup" in html when ts file like: 

  targetEmployeeonpopup: Employees[]=[]; 
  this.targetEmployeeonpopup.push({ uid: "aa",
          firstName: "aa",
          lastName: "aa",
          supervisorInd: true});

It displays when ts is: 

 this.targetEmployeeonpopup=[{ uid: "aa",
          firstName: "aa",
          lastName: "aa",
          supervisorInd: true}];

May I get feedback on any reason for the problem?

Solution

  • I believe the problem you are facing is because of optimisation reasons on the table.

    I believe the table is optimised to only work with detection strategy OnPush.

    Meaning it won’t detect inner changes of objects (mutation). When you do a push you are mutating the object and not creating a new reference.

    Try doing the same thing but using the spread operator instead.

    Something like:

    this.targetEmployeeonpopup = [...this.targetEmployeeonpopup,{ uid: "aa", firstName: "aa", lastName: "aa", supervisorInd: true}];

    The spread operator will create a new object with the new elements. That will trigger Angular change detection on the table. Because it’s not mutating the original object.