CODEWITHSUNDEEP
angulartypescriptdatatableprimeng
miff
miff

Reputation: 342

PrimeNG dataTable not 'reload' table

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"
    }
  ]
}

Upvotes: 0

Views: 718

Answers (1)

Grégory Elhaimer
Grégory Elhaimer

Reputation: 2801

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;

  }

Upvotes: 3

Related Questions