Angular2 - Updating NGX-DataTable with Function "Expression has changed..."

Question

I have two tables. My goal is to press a button on a row on my first table, have that call a function, and have that function add that row to my second table.

Right now my code looks like this:

<ngx-datatable
      class='material'
      [rows]='rowsAll'
      ...
>
 <ngx-datatable-column 
   ...
  >
    <ng-template 
      ...
    > 
      <button (click)="addRow(value)">
        Add
      </button>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

<ngx-datatable
      class='material'
      [rows]='rowsSelected'
      ...
>
</ngx-datatable>

addRow(selectedRow){
  // Get row via value
  ...

  // Add Row
  this.rowsSelected.push(selectedRow);
  this.ref.markForCheck();
}

and it works, but I get this error whenever I click an even row:

Expression has changed after it was checked. Previous value: 'datatable-body-row datatable-row-odd'. Current value: 'datatable-body-row datatable-row-even'.

After doing some research I think that having addRow() update the second table is causing a change without a check for change, which is why I added the this.ref.markForCheck() - but that did not seem to make any change. So I am still lost as to how to fix this problem.

Is there a correct way for me to update the rows for the second table or should I just keep trying ways to manually trigger a check after updating the second table as I'm doing now? Or am I just misunderstanding something else all together?

Elaina Elaina · Accepted Answer · 2017-06-30T02:08:20

If you reassign the rowsSelected variable instead of pushing to the array, that should trigger angular's change detection and update the table.

this.rowsSelected = [...this.rowsSelected, selectedRow];

Angular2 - Updating NGX-DataTable with Function "Expression has changed..."

1 Answers