按行分组的 PrimeNg table 不显示新记录

Question

PrimeNg DataTable Row Group 使用 primeng 代码并创建一个函数来将对象添加到我的数据数组。但是添加新数据时不显示。但是如果显示在数据的总和中，即不显示数据但统计记录。

HTML

<button (click)="agregar()">add</button>

<p-table class="gobal-group-table" [value]="datos" [scrollable]="true" scrollHeight="800px"
    sortField="representative.name" sortMode="single" dataKey="representative.name" rowGroupMode="subheader"
    groupRowsBy="representative.name" responsiveLayout="scroll">
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>Image</th>
            <th>Price</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="groupheader" let-customer let-rowIndex="rowIndex" let-expanded="expanded">
        <tr>
            <td colspan="3">
                <button type="button" pButton pRipple [pRowToggler]="customer"
                    class="p-button-text p-button-rounded p-button-plain p-mr-2"
                    [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
                <span class="p-text-bold p-ml-2">{{customer.representative.name}}</span>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="groupfooter" let-customer>
        <tr class="p-rowgroup-footer">
            <td colspan="2" style="text-align: right">Total Customers</td>
            <td>{{calculateCustomerTotal(customer.representative.name)}}</td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-customer>
        <tr>
            <td>{{customer?.representative.name}}</td>
            <td>{{customer?.name}}</td>
            <td>{{customer?.name}}</td>
        </tr>
    </ng-template>
    <ng-template pTemplate="summary">
        <div class="p-d-flex p-ai-center p-jc-between">
            In total there are {{datos ? datos.length : 0 }} Customers.
        </div>
    </ng-template>
</p-table>

TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-global-group-table',
  templateUrl: './global-group-table.component.html',
  styleUrls: ['./global-group-table.component.scss']
})
export class GlobalGroupTableComponent implements OnInit {

  datos: any = [
    {
      "id": 1047,
      "name": "Kanisha Waycott",
      "country": {
        "name": "Ecuador",
        "code": "ec"
      },
      "company": "Schroer, Gene E Esq",
      "date": "2019-11-27",
      "status": "new",
      "verified": false,
      "activity": 80,
      "representative": {
        "name": "Xuxue Feng",
        "image": "xuxuefeng.png"
      },
      "balance": 9920
    },
    {
      "id": 1048,
      "name": "Emerson Bowley",
      "country": {
        "name": "Finland",
        "code": "fi"
      },
      "company": "Knights Inn",
      "date": "2018-11-24",
      "status": "new",
      "verified": false,
      "activity": 63,
      "representative": {
        "name": "Stephen Shaw",
        "image": "stephenshaw.png"
      },
      "balance": 78069
    },
    {
      "id": 1049,
      "name": "Blair Malet",
      "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
    }
  ];

  constructor() { }

  ngOnInit() {
  }

  agregar() {
    this.datos.push({
      "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
    })
  }

  calculateCustomerTotal(name: any) {
    let total = 0;

    if (this.datos) {
      for (let customer of this.datos) {
        if (customer.representative.name === name) {
          total++;
        }
      }
    }

    return total;
  }

}

这是正常的table:

Normal Table

这是添加更多数据后的table：

Table with new data

Answer 1

我刚刚对这个想法做了一些解释，看看它是否对你有帮助：

HTML，改成这样：

<div *ngIf="datos$ as datos">
<p-table 
   class="gobal-group-table" 
   [value]="datos | async"
   [scrollable]="true" 
   scrollHeight="800px"
   sortField="representative.name" 
   sortMode="single" 
   dataKey="representative.name" 
   rowGroupMode="subheader"
   groupRowsBy="representative.name"
   responsiveLayout="scroll"
>
...
</p-table>
</div>

TS:

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, Observable, of } from 'rxjs';


@Component({
  selector: 'app-global-group-table',
  templateUrl: './global-group-table.component.html',
  styleUrls: ['./global-group-table.component.scss']
})
export class GlobalGroupTableComponent implements OnInit {

    datos$: obserbable<any[]>; 
    datosSource: BehaviorSubject<any[] | null>(null);
    datosSubject$ = this.datosSource.asObservable();

    constructor() {

        const _initDatos = [
            {
              "id": 1047,
              "name": "Kanisha Waycott",
              "country": {
                "name": "Ecuador",
                "code": "ec"
              },
              "company": "Schroer, Gene E Esq",
              "date": "2019-11-27",
              "status": "new",
              "verified": false,
              "activity": 80,
              "representative": {
                "name": "Xuxue Feng",
                "image": "xuxuefeng.png"
              },
              "balance": 9920
            },
            {
              "id": 1048,
              "name": "Emerson Bowley",
              "country": {
                "name": "Finland",
                "code": "fi"
              },
              "company": "Knights Inn",
              "date": "2018-11-24",
              "status": "new",
              "verified": false,
              "activity": 63,
              "representative": {
                "name": "Stephen Shaw",
                "image": "stephenshaw.png"
              },
              "balance": 78069
            },
            {
              "id": 1049,
              "name": "Blair Malet",
              "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$
           .subscribe( (_datos:any[]) => {
              if ( _datos && _datos?.length > 0) {          
                 this.setDatosSubject(_datos);
              }
           });
           
         this.setDatosSubject(_initDatos);
       
    }

    ngOnInit() {}
     
    agregar() {

        let currentDatos = this.getDatosSubject();

        currentDatos.push({
          "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
        });
        
        this.setDatosSubject(currentDatos);
        
    }

    calculateCustomerTotal(name: any) {
        let total = 0;

        if (this.datos) {
          for (let customer of this.datos) {
            if (customer.representative.name === name) {
              total++;
            }
          }
        }

        return total;
    }



     

    setDatosSubject(datos: any[]) {
        this.datosSubject.next(datos);
    }

    getDatosSubject() {
        return this.datosSubject.value;
    }

}




}

按行分组的 PrimeNg table 不显示新记录

The PrimeNg table grouped by rows does not show new records

javascript

angular

primeng