Angular 使用页面事件时,Mat分页器出错

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

我正在处理Paginator,需要调用RESTAPI,它的输入参数是offset和limit。对于我的工作,我已将页面大小设置为10,并希望在单击下一页事件时显示下10条记录。但每次偏移量都被指定为NaN

需要快速帮助

html代码

组件技术

我的方法是否遗漏了什么?

getPage函数将输入作为事件,而不是数字。您需要修改getPage函数,如下所示:

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