当用户到达最后一页时如何禁用按钮

Question

I have response in such form

{
  "currentPage": 1,
  "totalPages": 2,
  "totalCount": 2,
  "pageSize": 1,
  "items": [
    {
      "productId": 2,
      "name": "testPorduct",
      "description": "bla bla bla",
      "price": 1000,
      "state": "new",
      "color": "sss",
      "rate": 5.5,
      "imageFileName": "ooo",
      "quantity": 10,
      "categoryId": 5
    }
  ],
  "hasPrevious": false,
  "hasNext": true
}

where i have hasPrevious and hasNext properties, and i need to make button disabled when property hasNext is false.

I use EventEmitter for rerendering page when user change page size or pageNumber, and on every click i make request to the server:

ngOnInit(): void {
    
    this.restService.getProductsPaged(this.defaultPageSize, this.defaultPageNumber).subscribe(
      (data: Product) => this.products = {
        currentPage : data.currentPage,
        totalPages : data.totalPages,
        totalCount : data.totalCount,
        pageSize : data.pageSize,
        items: data.items,
        hasPrevious: data.hasPrevious,
        hasNext: data.hasNext,
      }
    )
  }

and for example next page:

next(event){
    event.preventDefault;
    this.page += 1;
    this.pageChange.emit(this.page)
    this.restService.getProductsPaged(this.pageSize, this.page).subscribe(
      (data: Product) => this.products = {
        currentPage : data.currentPage,
        totalPages : data.totalPages,
        totalCount : data.totalCount,
        pageSize : data.pageSize,
        items: data.items,
        hasPrevious: data.hasPrevious,
        hasNext: data.hasNext,
      }
    )
  }

my checkLastPage function

checkLastPage() : boolean{
    var a = this.products.hasNext;
    console.log(a);
    return !a;
  }

and my console.log prints me four times true or false and 'Cannot read property 'hasNext' of undefined' How can i solve this problem? Thanks in advance.

Answer 1

The issue you might be having which says that 'Cannot read property 'hasNext' of undefined' occurs because you might not have initialized products object.

You dont need to create a separate function just to disable the button. You can directly use [disabled] directive in angular.

For Example:

<button (click)="next($event)" [disabled]="!products || !products.hasNext">
</button>