PrimeNg行分组表格新增记录不显示但统计计数正常问题求助

问题原因 #

• PrimeNG Table 默认使用 OnPush 变更检测策略，仅当绑定的 [value] 数据源引用发生变化时才会触发完整重渲染。你使用 Array.push() 是对数组的原地修改，没有改变数组的内存引用，因此表格无法感知到数据更新。你自定义的统计方法因为直接读取最新的数组长度/遍历内容，不受变更检测策略限制，所以能正常更新。
• 附加异常点：你当前给 dataKey 属性传的是 representative.name，这个是分组维度的key，而Table的dataKey属性是用来标识单条数据唯一值的，应该设置为每条数据的唯一字段比如id，否则也可能导致分组渲染、展开状态匹配异常。

解决方案 #

推荐方案（符合Angular数据流规范） #

修改agregar方法，新增数据后直接替换整个数组的引用，同时修正p-table的dataKey属性即可。

1. 修正HTML中p-table的属性

<!-- 仅修改dataKey属性即可，其余代码保持不变 -->
<p-table class="gobal-group-table" [value]="datos" [scrollable]="true" scrollHeight="800px"
    sortField="representative.name" sortMode="single" dataKey="id" rowGroupMode="subheader"
    groupRowsBy="representative.name" responsiveLayout="scroll">
<!-- 其余模板代码保持不变 -->
</p-table>

2. 修正TS中的新增数据方法

agregar() {
  // 用扩展运算符生成新数组替换原数组，触发引用变更
  this.datos = [...this.datos, {
    "id": 10492,
    "name": "Blair",
    "country": {
      "name": "Finland",
      "code": "fi"
    },
    "company": "Bollinger Mach Shp & Shipyard",
    "date": "2018-04-19",
    "status": "new",
    "verified": true,
    "activity": 92,
    "representative": {
      "name": "Asiya Javayant",
      "image": "asiyajavayant.png"
    },
    "balance": 65005
  }]
}

后续执行数据修改、删除操作时也遵循相同逻辑，不要直接修改原数组元素，生成新数组赋值给datos即可自动触发渲染。

备选方案（手动触发表格重绘） #

如果不想每次都替换数组引用，也可以通过ViewChild获取Table组件实例，数据更新后手动调用reset()方法触发重渲染：

import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';

export class GlobalGroupTableComponent implements OnInit {
  @ViewChild(Table) private table: Table;
  // 其余原有代码保持不变

  agregar() {
    this.datos.push({
      // 你的新增数据
    })
    this.table.reset();
  }
}

内容的提问来源于stack exchange，提问作者CESAR ANDRES BAUTISTA MORA