PrimeNG dataTable 不是“重新加载”表

Question

我有[value]="rows[indexString]" 用于模板中的数据表。 在组件中

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

}

基本上我正在学习here的教程

只有第一行呈现在表格中，在模板{{rows | json}}中，一切都在那里：

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

Answer 1

在您的情况下，this.rows 是 object，而不是 array。

我认为问题可能出在您复制this.rows 的方式上。您正在使用扩展运算符从 this.rows 副本创建一个新对象。你想要的是一个数组。

试试这个：

let rows = [...this.rows]

编辑： 我会完成我的答案。 问题是复制行和重新分配行时对对象的引用会丢失。那么就无法观察到变化。

您需要复制的是您当前正在使用的数组。不是整个对象。

  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;

  }