ngx-分页单击下一页不起作用

Posted 2023-03-29

【中文标题】ngx-分页单击下一页不起作用

【英文标题】：ngx-pagination click next page not working

【发布时间】：2019-12-29 17:38:57

【问题描述】：

我的分页有问题。当我尝试单击下一页时，它无法按预期工作。当我点击数字转到下一页时，它也不起作用。

我提供了下面的代码和Demo 链接供您参考。

HTML

<table
      mat-table
      [dataSource]="dataSource"
      matSort
      multiTemplateDataRows
      class="mat-elevation-z8-"
    >
    <ng-container
        matColumnDef=" column "
        *ngFor="let column of columnsToDisplay | paginate:  id: 'server', itemsPerPage: 10, currentPage: p, totalItems: total "
      ><!-- -->
      <ng-container *ngIf="column === 'select'; else notSelect">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)"
                        >
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container *ngIf="column.length == 11"  matColumnDef="created_at">
        <th mat-header-cell *matHeaderCellDef mat-sort-header><strong> column </strong></th>
      </ng-container>
      <ng-container #headerSort>
        <th mat-header-cell *matHeaderCellDef><strong> column </strong></th>
      </ng-container>

        <td
          mat-cell
          *matCellDef="let element; let i = index"
          (click)="open(element)"
          class="pointer"
        >
          <ng-container>
             element.created_at|date:'dd/MM/yyyy'

          </ng-container>

            <p *ngIf="column.length == 7">
          element.state
          </p>
          <p>
              element.number
          </p>
          <p>
          element.title
        </p>
        </td>

      </ng-container>

     <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr
        mat-row
        *matRowDef="let element; columns: columnsToDisplay"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"

      ></tr>

    </table>
    <pagination-controls (pageChange)="getPage($event)" id="server" ></pagination-controls>

组件

import ChangeDetectionStrategy, ViewChild, Input, Component  from '@angular/core';
    import Observable, of from 'rxjs';
    import  delay, map, tap  from 'rxjs/operators';
    import  MatTableDataSource, MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatPaginator, MatSort, Sort  from '@angular/material';
    import animate, state, style, transition, trigger from '@angular/animations';
    import  SelectionModel  from '@angular/cdk/collections';
    import HttpDatabase, GithubIssue from './app.service';

    // interface IServerResponse 
    //     items: string[];
    //     total: number;
    // 

    @Component(
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ],
      changeDetection: ChangeDetectionStrategy.OnPush
    )
    export class AppComponent  
      data: any = [];
      selectedRowIds: string;
      element:string;
      columnsToDisplay: string[]  = ['Scoopy Name', 'Domain', 'Status', 'title'];

      selection = new SelectionModel<GithubIssue>(true, []);
      displayedColumns: string[] = ['created_at','number', 'state', 'title'];
      dataSource = new MatTableDataSource<GithubIssue>();
      @ViewChild(MatSort, static: false) sort: MatSort;
        p: number = 1;
        total: number;
        loading: boolean;

        constructor(private httpDatabase: HttpDatabase) 
    marked = false;
    isAllSelected() 
        const numSelected = this.selection.selected.length;
        const idSelected = this.selection.selected;
        const numRows = this.dataSource.data.length;
        return numSelected === numRows;
      

      masterToggle() 
        if(this.isAllSelected())
                this.selection.clear();
                // this.isButtonEnable = true;
                this.marked = false;
            else
                this.dataSource.data.forEach(row => this.selection.select(row));
                // this.isButtonEnable = false;
                this.marked = true
        

    


        ngOnInit() 
            this.getPage('desc','created',1);
        

        getPage(sort: string, order: string, page: number) 
           this.httpDatabase.getRepoIssues(sort, order, page).subscribe(res =>
          console.log("TEST PAGE " +page)
          this.dataSource.data = res['items'];
           console.log(this.dataSource.data)
           this.total = this.dataSource.data.length;
           console.log(this.total)
    );
        
    

【参考方案1】：

问题

方法getPage定义如下：

getPage(sort: string, order: string, page: number) 
  // ...

它的第一个参数是字符串sort，第二个参数是字符串order，最后是第三个参数是数字page。

但是你在 HTML 中使用它如下：

<pagination-controls (pageChange)="getPage($event)" id="server" ></pagination-controls>

在这里，您提供了第一个参数$event，这是选择的新页面（编号）。这是在 getPage 方法中作为参数 sort 接收的（因为它被声明为第一个参数），因此您将 undefined 作为 page 的值strong> 论据。

解决方案

一种选择是重新排列参数的顺序如下：

getPage(page: number, sort: string, order: string, ) 
  // ...

如果您遵循这种方法，请记住将getPage 中的调用更新为ngOnInit 以匹配新签名：

ngOnInit() 
    this.getPage(1, 'desc', 'created');

补充说明

考虑为参数order 和sort 设置一些默认值，这样HTML 中对getPage 的调用就不需要提供它们。像这样的：

getPage(page: number, sort: string = 'desc', order: string = 'created') 
  // ...

此外，如果您希望样式正确工作（将当前页面标记为选中），您需要在getPage 函数中将p 的值设置为所选页面，如下所示：

getPage(page: number, sort: string = 'desc', order: string = 'created') 
  this.p = page;
  // ...

Stackblitz Demo