Angular ngx分页单击下一页不工作

我对分页有问题。当我尝试单击“下一页”时，它无法按预期工作。当我点击数字进入下一页时，它也不起作用

我提供了下面的代码和一个链接供您参考

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>

{{column}}
{{column}}
{{element.created|u日期：'dd/MM/yyyy'}

{{element.state}


{{element.number}


{{element.title}

组件

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

从'@angular/core'导入{ChangeDetectionStrategy，ViewChild，Input，Component}；
从'rxjs'导入{可观察的}；
从“rxjs/operators”导入{delay，map，tap}；
从“@angular/material”导入{MatTableDataSource、MatDialog、MatDialogRef、MAT_DIALOG_数据、MatPaginator、MatSort、Sort}；
从“@angular/animations”导入{动画、状态、样式、转换、触发器}；
从'@angular/cdk/collections'导入{SelectionModel}；
从“/app.service”导入{HttpDatabase，GithubIssue}；
//接口响应{
//项目：字符串[]；
//总数：个；
// }
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类AppComponent{
数据：any=[]；
selectedRowIds：字符串；
元素：字符串；
columnsToDisplay:string[]=['Scoopy Name'，'Domain'，'Status'，'title']；
selection=新SelectionModel（true，[]）；
displayedColumns:string[]=['created_at'，'number'，'state'，'title']；
dataSource=新MatTableDataSource（）；
@ViewChild（MatSort，{static:false}）sort:MatSort；
p：数字=1；
总数：个；
加载：布尔；
构造函数（私有httpDatabase:httpDatabase）{}
标记=假；
isAllSelected（）{
const numSelected=this.selection.selected.length；
const idSelected=this.selection.selected；
const numRows=this.dataSource.data.length；
返回numSelected==numRows；
}
masterToggle（）{
if（this.isAllSelected（））{
this.selection.clear（）；
//this.isButtonEnable=true；
这个标记为假；
}否则{
this.dataSource.data.forEach（row=>this.selection.select（row））；
//this.isButtonEnable=false；
这是真的
}
}
恩戈尼尼特（）{
这个.getPage（'desc'，'created'，1）；
}
getPage（排序：字符串，顺序：字符串，页面：编号）{
this.httpDatabase.getrepoises（排序、顺序、页面）.subscribe（res=>{
console.log（“测试页面”+页面）
this.dataSource.data=res['items']；
log（this.dataSource.data）
this.total=this.dataSource.data.length；
console.log（this.total）
});
}
}

问题 方法

getPage

定义如下：

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

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

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

它期望第一个参数是字符串

排序

，第二个参数是字符串

顺序

，最后一个参数是数字

页面

但是，您在HTML中使用了它，如下所示：

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

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

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

如果采用这种方法，请记住更新

ngOnInit

中对

getPage

的调用，以匹配新签名：

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