6

在我的 Angular 5 项目中，我有一个 PrimeNG 表，我想从 url 加载分页参数，例如：http://.... tickets?first=10&sortField=exitDate&sortOrder=1

问题是当我刷新页面时，我看不到正确的 sortIcon 和正确的分页器。

在component.ts onInit 中，我将 url 中的所有参数加载到一个数组中：

this.route.queryParams.subscribe((params: Params) => {
    for (const param in params) {
        filters.push({ property: param, value: params[param] })
       }
     this.preloadFilterFields(filters)
    })

然后我将参数放入事件中

  preloadFilterFields(filters: Filter[]) {
    for (const filter of filters) {
      if (filter.property === 'first') {
        this.event.first = filter.value;
      } else if (filter.property === 'sortField') {
        this.event.sortField = filter.value;
      } else if (filter.property === 'sortOrder') {
        this.event.sortOrder = filter.value;
      }
    }
  }

这是table.html

<p-table [value]="ticketList" [lazy]="true" (onLazyLoad)="loadModelData($event)" [paginator]="true" 
[totalRecords]="totalElements" 
[rows]="10" [responsive]="true" 
[loading]="loader" dataKey="createdDate" [sortField]="event.sortField"
[sortOrder]="event.sortOrder">

事件是这样初始化的，第一次加载表格时，我看到了正确的分页和排序：

event: LazyLoadEvent = { sortOrder: -1, sortField: 'createdDate' };

但是当我改变分页event.sortOrder并尝试刷新页面时，我看到了正确的事件，但没有看到正确的排序图标/分页器

=============================更新===================== ========= https://stackblitz.com/edit/angular-4qz1ye?file=app%2Fapp.component.ts 我需要使用代码中的参数以编程方式重新排序此表（不点击进入表）有可能吗？

4

0 回答 0