[FIXED] PrimeNG dataTable not 'reload' table

Issue

I have [value]="rows[indexString]" for dataTable in template.
In component

rows: any = {}
newrow: any = {}
...
addNewRow(key: string) {

  let rows = {...this.rows}
  let newrow = {_key: Math.floor(Math.random() * 10000), title: this.newrow.title}
  
  if (rows[key]) {
    rows[key].push(newrow)
  } else {
    rows[key] = newrow
  }
  
  this.rows = rows

}

Basically I am following tutorial from here

Only the first row rendered in table, in template {{rows | json}}, everything is there:

{
  "210386": [
    {
      "_key": 9173,
      "title": "Row one"
    },
    {
      "_key": 6201,
      "title": "Row Two"
    }
  ]
}

Solution

In your case, this.rows is an object, not an array.

I think the problem might be the way you’re copying this.rows. You are using spread operator to create a new object from this.rows copy. What you want is an array.

Try this instead:

let rows = [...this.rows]

EDIT:
I’ll complete my answer.
The problem is reference to your object is lost when copying rows ans reassigning them. Then observation of changes can’t occur.

What you need to copy is the array you are currently working with. Not the whole object.

  addNewRow(key: string) {

    let newrow = {_key: Math.floor(Math.random() * 10000), title: this.newrow.title}

    let rows = [];

    if (this.rows.hasOwnProperty(key)) { // check is key already exists
      rows = [...this.rows[key], newRow];
    } else {
      rows = [newRow]
    }

    this.rows[key] = rows;

  }

Answered By – Grégory Elhaimer

Answer Checked By – Laura B. (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published