Ошибка Mat Paginator при использовании события страницы

Question

Я работаю над Paginator, и мне нужно вызвать REST API, который имеет смещение и ограничение в качестве входного параметра. Для моей работы я установил размер страницы как 10 и хочу, чтобы следующие 10 записей отображались при щелчке на событии следующей страницы. Но каждый раз смещение присваивается как NaN.

Требуется быстрая помощь.

html код

<mat-paginator [pageIndex]="pageIndex" [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
      (page)="pageEvent = getPage($event)" [showFirstLastButtons]="true">
    </mat-paginator>

Component.ts

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

Мне что-то не хватает в моем подходе?

Answer 1

Функция

getPage вводится как событие, а не как число. Вам нужно изменить функцию getPage следующим образом:

getPage(event: any) {
   this.pageIndex = event.pageIndex;
   this.getData(this.pageIndex);
}