使用abp框架在ngx数据表中分页

Question

如何在 Angular 的 abp 框架中的 ngx 数据表中显示分页页脚？

我正在使用 ListService 和 PagedResultDto，我应该在外部实现分页吗？

          <ngx-datatable [scrollbarH]="false" (activate)="onActivate($event)"  [rows]="auditImportsByCreatorId.items" [count]="auditImportsByCreatorId.totalCount" default>
            <ngx-datatable-column [name]="'::Proceed Date' | abpLocalization" prop="importDate">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row.importDate | date}}
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [name]="'::File Name' | abpLocalization" prop="displayFileName">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row.displayFileName}}
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [name]="'::Number of Claims' | abpLocalization" prop="recordCount">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row.recordCount}}
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [name]="'::Contact/Requestor' | abpLocalization" prop="contactName">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ row.contactName}}
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [name]="'::Return Status' | abpLocalization" prop="returnStatus">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{ getStautsValue(row.returnStatus)}}
              </ng-template>
            </ngx-datatable-column>
          </ngx-datatable>

Answer 1

ABP框架ngx-datatable当总记录数大于10时会出现分页。

ListService 的 maxResultCount 默认值为 10。

您可以更改组件中 maxResultCount 的值，如下所示：

    constructor(public readonly list: ListService) {
        this.list.maxResultCount = 2;
    }

现在只要记录数大于2就可以看到分页了。

Answer 2

您可以在 abp ngx Angular 中进行分页：

1. 第一个：book.component.html：NGX示例

      <ngx-datatable [rows]="book.items" [count]="book.totalCount"   [list]="list"  (page)="onPage($event)"default></ngx-datatable>
   
   

2. book.component.ts：ABP 示例
   

     constructor(public readonly list: ListService){
              getBooks = {} as GetBooksInputDto;
          }
   

   ListService maxResultCount 默认值为 10。

   ngOnInit(): void {                           
       this.list.maxResultCount=10;
       this.getList(this.getBooks);
     }
   

   事件包含：{"count": 3,"pageSize": 2,"limit": 2,"offset":}

   onPage(event) {
   
    console.log(event)
    this.getPages.skipCount = event.offset;
   
    }
   

   getBooks = {} as GetBooksInputDto;
   

   getList(queryFilter: GetBooksInputDto) {
       this.getBooks.maxResultCount = this.list.maxResultCount;
       const bookStreamCreator = 
             (query)=>this.bookService.getList(queryFilter, query);
            this.list.hookToQuery(bookStreamCreator).subscribe((response) =>   
             {
              this.book = response;
            });
        }