我对分页有问题。当我尝试单击下一页时，它无法按预期工作。当我单击数字进入下一页时，它也不起作用。
我提供了下面的代码和一个演示链接供您参考。
.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)
});
}
}
问题
方法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参数的值。
溶液
一种选择是按如下方式重新排列参数的顺序：
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;
// ...
}