PrimeNG 数据表不是 'reload' table

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

的教程

只有在 table 中呈现的第一行，在模板 {{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;

  }

PrimeNG 数据表不是 'reload' table

PrimeNG dataTable not 'reload' table

datatable

typescript

primeng

angular