Angular 使用页面事件时,Mat分页器出错
我正在处理Paginator,需要调用RESTAPI,它的输入参数是offset和limit。对于我的工作,我已将页面大小设置为10,并希望在单击下一页事件时显示下10条记录。但每次偏移量都被指定为NaN 需要快速帮助 html代码 组件技术 我的方法是否遗漏了什么?getPage函数将输入作为事件,而不是数字。您需要修改getPage函数,如下所示:Angular 使用页面事件时,Mat分页器出错,angular,angular-material,Angular,Angular Material,我正在处理Paginator,需要调用RESTAPI,它的输入参数是offset和limit。对于我的工作,我已将页面大小设置为10,并希望在单击下一页事件时显示下10条记录。但每次偏移量都被指定为NaN 需要快速帮助 html代码 组件技术 我的方法是否遗漏了什么?getPage函数将输入作为事件,而不是数字。您需要修改getPage函数,如下所示: getPage(event: any) { this.pageIndex = event.pageIndex; this.getDa
getPage(event: any) {
this.pageIndex = event.pageIndex;
this.getData(this.pageIndex);
}
将数据源分页器设置为您的分页器,然后将分页器长度设置为数据。length@JohnPeters添加了this.dataSource.paginator=this.paginator;this.paginator.length=this.length;但仍然是同一个问题。它现在起作用了。你知道我该如何实现第一页和最后一页的功能吗?任何帮助都将不胜感激。@pulse如果您想实现第一页和最后一页,您只能使用showFirstLastButtons,而不能使用[showFirstLastButtons]=true
export class Exec implements OnInit{
runData: Items;
dataSource: MatTableDataSource<Execution>;
pageIndex: number = 1;
pageSize: number= 10;
pageSizeOptions: number[] = [5, 10, 15, 20];
length: number;
pageEvent: PageEvent;
@Output() page = new EventEmitter<MatTableDataSource<Exec>>();
constructor(private executionService: ExecutionService) { }
displayedColumns: string[] = ['abc','efg','efg'];
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
ngOnInit() {
this.getData(this.pageIndex);
}
getPage(pageNo: number) {
this.pageIndex = pageNo;
this.getData(this.pageIndex);
}
getData(input: number){
console.log('input is '+input +' offset is ==>'+(input - 1) * this.pageSize) // this is printed as "input is [object Object] offset is ==>NaN"
let offset = (input - 1) * this.pageSize;
this.exec.getDetails(offset,this.pageSize).subscribe(
(response:Items) => {
this.runData = response;
console.log(this.runData);
this.dataSource = new MatTableDataSource<Execution>(this.runData.items);
this.length =140; // for testing. Total records will be used
// this.dataSource.paginator=this.paginator;
// this.dataSource.sort=this.sort;
}
);
this.page.emit(this.dataSource);
}
}
getPage(event: any) {
this.pageIndex = event.pageIndex;
this.getData(this.pageIndex);
}