首页 > 解决方案 > 排序primeng p-table

问题描述

我有这张桌子:

    <p-table [value]="claims" [lazy]="true" (onLazyLoad)="loadClaimsLazy($event)"
        [paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading" [rowsPerPageOptions]="[10,25,50]">
        <ng-template pTemplate="header">
            <tr>
                <!--<th style="width: 3em"></th>-->
                <th [pSortableColumn]="'claimSummary.id'">
                    Ref
                    <p-sortIcon [field]="'claimSummary.id'"></p-sortIcon>
                </th>
                <th  [pSortableColumn]="'claims.lastName'">
                    Claimant
                    <p-sortIcon [field]="'claims.lastName'" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
                </th>
                <th>Date Claimed</th>
                <th>Beneficiary</th>
                <th align="right">Claim amount in Euros</th>
                <th align="right">Creator</th>
                <th align="right">Assignee</th>
                <th align="right">Actions</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-claimSummary>
            <tr>
                <td>{{claimSummary.id}}</td>
                <td>{{claimSummary.claimMep.lastName}} {{claimSummary.claimMep.firstName}}</td>
                <td>{{claimSummary.claimDate | date: 'dd/MM/yyyy'}}</td>

和打字稿:

    loadClaimsLazy(event: LazyLoadEvent) {
    const statusUpperCase = this.selectedStatus.toLocaleUpperCase();
    console.log('loadClaimsLazy '+statusUpperCase);



    this.getData( event.first, event.rows);
}

private getData(first: number, numRows: number){
    const statusUpperCase = this.selectedStatus.toLocaleUpperCase();
    console.log('getData '+statusUpperCase);
    this._claims.getClaimsByStatus(statusUpperCase,first, numRows)
    .pipe(takeWhile(() => this.alive))
    .subscribe((list: IClaimsList) => {
        this.totalRecords = list.count;
        this.claims = list.claims;
    });


}

这给了我标题 Ref 上的选择器。当我单击标题时,它会触发对该方法的调用,loadClaimsLazy但正文未排序。

你知道我在这里想念什么吗?

标签: angularsortinghtml-tableprimeng

解决方案


推荐阅读