Angular Материал paginator nextPage свойство

Question

У меня есть в общей сложности 250 элементов, и я отображаю 5 из них, т.е. pageSize установлено на 5. и я установил свойство paginator.length на items.length

Теперь здесь есть две проблемы:

Даже если я вручную установил paginator.length, но когда я console.log свойства paginator, он показывает 5 (Каково количество элементов, которые я Показываю на страницу). следовательно, кнопка next paginator отключена.

Как включить кнопку next, чтобы при ее нажатии я знал и запрашивал следующие данные на сервере. Помните: я использую только внутреннюю нумерацию страниц в этом отношении. Информация разбиения на страницы передается в заголовках ответа от сервера. Вот мой код

pageIndex=1;
pageNumber;
pagination;
ngOnInit(): void {
    this.paginator.pageSize = 5;
    this.paginator.pageIndex = this.pageIndex;

    this.salesReportService.getDailyReport().subscribe((response) => {
      console.log('Response of sales report : ', response);
      this.reports = response.body;
      this.pagination=response.headers.get('X-Pagination');
      console.log('PaginationInformation: ',this.pagination)

      this.paginator.length=this.pagination.TotalCount;

      console.log('paginator properties: ', this.paginator);
      console.log('paginator hasNextpage(): ', this.paginator.hasNextPage());
      this.dataSource = new MatTableDataSource(this.reports);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }, (error) => {
      console.log('Error occured while fetching sales report: ', error);
    });
  }
// here I'd call the function to get the next data when the next button of paginator is clicked.

// something like this
this.salesReportService.getReports(pageNumber:2) 

Answer 1

Это потому, что вы устанавливаете длину paginator в первую очередь, а затем пытаетесь выполнить ниже строк

   this.dataSource = new MatTableDataSource(this.reports);
  this.dataSource.paginator = this.paginator;

, что позволяет paginator устанавливать длину для данных, доступных в источнике данных.

Итак, после этих двух строк оставьте в своем коде строку ниже.

  this.paginator.length=this.pagination.TotalCount; // this.paginator.length= 'No Of Records';

Надеюсь, это поможет!