當用戶到達最后一頁時如何禁用按鈕

Question

我有這種形式的回應

{
  "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
}

我有 hasPrevious 和 hasNext 屬性，當屬性 hasNext 為 false 時，我需要禁用按鈕。

當用戶更改頁面大小或 pageNumber 時，我使用 EventEmitter 重新呈現頁面，並且在每次單擊時我都會向服務器發出請求：

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

例如下一頁：

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

我的 checkLastPage function

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

我的console.log 打印我四次真假和'無法讀取未定義的屬性'hasNext'' 我該如何解決這個問題？ 提前致謝。

Answer 1

您可能遇到的問題是“無法讀取未定義的屬性 'hasNext'”，因為您可能沒有初始化產品 object。

您不需要創建單獨的 function 來禁用按鈕。 您可以直接使用 angular 中的 [disabled] 指令。

例如：

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