Primeng Datatable 4.3: array changes not populated

Question

I'm using primeng 4.3

I've coded this primeng datatable:

<p-dataTable [value]="quotes" [editable]="true">
  <p-column *ngFor="let col of cols" [field]="col.field 
    [header]="col.header" [editable]="col.editable">
    <ng-template let-col let-quote="rowData" pTemplate="editor">
      <p-spinner size="30" [(ngModel)]="quote[col.field]" name="quote"</p-spinner>
    </ng-template>
  </p-column>
</p-dataTable>

The problem appears when this.quotes changes. I mean, when a new array is populated on this.quotes, datatable doesn't populates changes.

In order to make sure a new array is populated I'm using:

this.quotes = Object.assign([], calculatedQuotes);

So, I mean, each time this.quotes is assigned, it has a new reference to a new array.

Any ideas?

I'm using primeng 4.3

Answer 1

As PRIMENG doc says:

Change Detection Table may need to be aware of changes in its value in some cases such as reapplying sort. For the sake of performance, this is only done when the reference of the value changes meaning a setter is used instead of ngDoCheck/IterableDiffers which can reduce performance. So when you manipulate the value such as removing or adding an item, instead of using array methods such as push, splice create a new array reference using a spread operator or similar.

So your ways is correct to see changes in your table:

this.quotes = Object.assign([], calculatedQuotes);

To add new item to your grid, you can use spread operator:

this.quotes = [...this.quotes , newObject];