Wie macht man eine dynamische Zeilengruppierung auf PrimeNG Datatable?

Question

Ich verwende PrineNG Datatable in Winkel 4 Anwendung. Ich möchte die Zeilengruppierung basierend auf dem ausgewählten Feld durchführen. Zum Beispiel, wenn der Benutzer auf die Händlerregion klickt, dann sollten die Daten nach der Händlerregion gruppiert werden, wenn der Benutzer auf den Händlerzustand klickt, dann sollten die Daten gemäß dem Händlerzustand gruppiert werden.

Referenz: https://www.primefaces.org/primeng/#/datatable/rowgroup

Meine Ansicht (HTML)

<div id ="default"><span (click)="default()">Default</span></div> 
<div id ="region"><span (click)="groupByDealerRegion()">Dealer Region</span></div> 
<div id ="state"><span (click)="groupByDealerState()">Dealer State</span></div> 


<p-dataTable #dt1 [value]="(auditList | orderBy: {property: 'dealerCode', direction: 1})" rowGroupMode="subheader" sortField = '{{groupField}}' groupField='{{groupField}}' 
     expandableRowGroups="true" id="datatable" name="datatable" exportFilename="Audits-list" [sortableRowGroup]="false" > 
     <p-header> 
     <div class="ui-helper-clearfix"> 
      <button type="button" pButton icon="fa-file-o" iconPos="left" label="CSV" (click)="dt.exportCSV()" style="float:left"></button> 
     </div> 
    </p-header> 
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData[groupField]}}</ng-template> 

    <p-column field="dealerCode" header="Dealer Code" ></p-column> 
    <p-column field="dealerName" header="Dealer Name"></p-column> 
    <p-column field="auditType" header="Audit Type"></p-column> 
    <p-column field="auditOnSite" header="Audit On-SIte"></p-column> 

</p-dataTable> 

Komponentenklasse

export class AuditListViewComponent implements OnInit { 


    groupField: string = 'auditType'; 

    @ViewChild(DataTable) dt: DataTable; 

    constructor(private sessionService : SessionService,private auditService : AuditService){ 

    } 

    auditList: AuditDetail[] = []; 

    ngOnInit(): void { 
     this.getAuditList(); 

    } 

    getAuditList(){ 
    this.auditService.getAuditList().then(auditList => { 
     this.auditList = auditList;   

    }); 
    } 



    groupByDealerRegion(){     

    this.sortedField = "dealerRegion"; 
    this.groupField = "dealerRegion" ; 

    } 

    groupByDealerState(){ 

    this.sortedField = "dealerState"; 
    this.groupField = "dealerState" ; 
    } 

    default(){ 
    console.log("default() --->>>"); 

    console.log(this.dt); 
    this.groupField = 'auditType'; 

    } 


} 

ich mit groupField Attribut der Datentabelle groupField Komponenten Variable binden möchten Datei. Ich implementiere erfolgreich die statische Zeilengruppierung. Voraussetzung ist jedoch, dass Daten gruppiert werden, wenn der Benutzer auf die Gruppierungsoption klickt.

Ich habe auch versucht, Datentabelle Referenz in der Komponente zu verwenden und Datatattribut ändern von Komponente funktioniert nicht.

Auf der Suche nach einer Lösung. Danke im Voraus.

Answer 1

Dies ist vielleicht nicht die beste Lösung da draußen, aber es funktioniert. Damit die dynamische Zeilengruppierung funktioniert, müssen wir die gesamte Datentabelle aktualisieren, nachdem wir das groupField geändert haben.

Verwenden Sie zum Aktualisieren der Tabelle eine boolesche Variable, um die Sichtbarkeit der Datentabelle zu steuern und setTimeout zu verwenden.

<p-dataTable *ngIf="display"></p-dataTable> 

In .ts-Datei, wenn Sie die Zeile Gruppierung Feld zu ändern,

this.display = false;  
setTimeout(() => this.display = true, 0);