Angular PrimeNG以编程方式排序和分页

时间:2018-04-04 13:08:49

标签: angular primeng primeng-turbotable

在我的angular 5项目中,我有一个PrimeNG表,我想从URL加载分页参数,例如: <plugin> <artifactId>maven-resources-plugin</artifactId> <version>2.6</version> <executions> <execution> <id>copy-resources</id> <!-- here the phase you need --> <phase>package</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <outputDirectory>${basedir}/target/windows/jre</outputDirectory> <resources> <resource> <directory>${java.home}</directory> </resource> </resources> </configuration> </execution> </executions> </plugin>

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

component.ts onInit中,我从数组中的url加载所有参数:

http://.... tickets?first=10&sortField=exitDate&sortOrder=1

然后我将参数放在事件中

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

这是 table.html

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

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

<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' }; 这样的分页并尝试刷新页面时,我看到了正确的事件,但我没有看到正确的sorticon / paginator

============================ UPDATE =============== =============== https://stackblitz.com/edit/angular-4qz1ye?file=app%2Fapp.component.ts 我需要以编程方式从代码中重新排序此表(不是单击表格)是否可能?

0 个答案:

没有答案