0

我在 Angular 4 应用程序中使用 primeNG 数据表。我想根据所选字段执行行分组。例如，如果用户单击经销商区域，则数据应按经销商区域分组，如果用户单击经销商状态，则数据应根据经销商状态分组。

参考： https ://www.primefaces.org/primeng/#/datatable/rowgroup

我的视图 (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>

组件类 

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'; 

   }


}

我想将组件的 groupField 变量与数据表的 groupField 属性绑定。我成功实现了静态行分组。但要求是当用户单击分组选项时对数据进行分组。

我还尝试在组件中使用数据表引用并从组件更改数据表属性都不起作用。

this.dt.groupField = 'dealerState';

寻找解决方案。提前致谢。

4

2 回答 2

1

这可能不是最好的解决方案，但它确实有效。为了使动态行分组起作用，我们必须在更改 groupField 之后刷新整个数据表。

要刷新表，请使用布尔变量来控制数据表的可见性并使用 setTimeout。

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

在 .ts 文件中，每当您更改行分组字段时，

this.display = false;    
setTimeout(() => this.display = true, 0);
于 2017-08-18T15:21:07.800 回答
0

您可以克隆审核列表

这是列表的深层副本

this.auditList = _.cloneDeep(this.auditList);

这是列表的浅拷贝

this.auditList = [...this.auditList];
于 2020-09-07T11:18:20.453 回答