Angular：如何根据API返回结果条件禁用下一页按钮

数据老陈

2026-8-25

解决Angular中根据API结果禁用Next按钮的问题

核心思路

通过组件变量绑定按钮的disabled属性，根据API返回结果动态修改变量值，实现按钮状态的控制。

具体实现步骤

在组件类中定义控制禁用状态的变量
在TS文件里添加布尔类型变量，初始设为false（默认按钮可用）：

isNextDisabled = false;

修改HTML按钮，绑定禁用属性
给按钮添加[disabled]属性，绑定到上述变量：

<button 
  type="button" 
  class="primary-button mat-raised-button buttontxt" 
  (click)="nextMindset()"
  [disabled]="isNextDisabled"
>Next</button>

注：原HTML中(click)="next()"与TS里的nextMindset()方法名不匹配，需统一为一致的方法名

在API回调中更新禁用状态
在ngOnInit的API订阅回调里，根据返回结果长度修改isNextDisabled的值：

ngOnInit(): void {
  this.appService.showLoader(true);
  this.coachService.GetCategories().subscribe(res => {
    this.appService.showLoader(false); // 请求结束后关闭加载器
    if (res && res.length === 0) {
      this.appService.openSnackBar('You do not have access to this Service');
      this.isNextDisabled = true; // 结果为空时禁用按钮
    } else {
      this.isNextDisabled = false; // 有结果时启用按钮
      if (res.length === 1 && res[0].name === 'pageOne') {
        // 原有业务逻辑代码
      }
    }
  }, error => {
    this.appService.showLoader(false); // 异常时关闭加载器
    this.isNextDisabled = true; // 请求失败时可禁用按钮，按需调整
  });
}

nextMindset() {
  // 路由跳转逻辑
}