PrimeNG dataTable不是“重新加载”表

Question

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 am following tutorial from here

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

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

Answer 1

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;

  }