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;
}
}
這是正常的表：
普通表
這是添加更多資料后的表：
包含新資料的表
uj5u.com熱心網友回復：
我剛剛解釋了一些關于這個想法的內容，看看它是否對你有幫助：
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;
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/348022.html
標籤：javascript 有角的 引物