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

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>