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

Question

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

我提供了下面的代码和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)
    });
        }
    }

Answer 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