Angular中按钮互斥禁用状态切换问题排查

核心问题：按钮禁用逻辑完全搞反 #

你的按钮disabled绑定逻辑和点击后的变量赋值完全颠倒了：

• “验证用户”按钮用[disabled]="verified"，意思是**verified为true时按钮禁用**。但你点击该按钮（传'true'）时，却把this.verified设为false，这会让按钮一直处于启用状态，和预期的“点击后禁用”完全相反。
• 同理，“取消验证”按钮绑定[disabled]="notVerified"，点击后你把this.notVerified设为true，会直接把这个按钮禁用，和你想要的“点击后启用”完全相反。

次要问题：方法名拼写不规范 #

方法名valiadtionoftherapist是拼写错误（正确应为validationoftherapist，字母i和a顺序颠倒），虽然当前HTML和TS里拼写一致能触发，但属于不规范写法，建议修正。

不推荐的DOM操作 #

Angular中应避免直接用document.getElementById操作DOM，建议改用@ViewChild获取元素，保持框架的响应式风格。

变量未初始化 #

verified和notVerified没有初始值，可能导致组件初始化时按钮状态异常，建议声明时赋予初始值。

修复后的TS代码 #

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit {
  // 初始化变量，避免undefined状态
  verified: boolean = false;
  notVerified: boolean = false;
  @ViewChild('validationImg') validationImg!: ElementRef;

  ngOnInit() {
    // 从API获取数据后赋值，示例逻辑：
    // 假设API返回用户已验证，就把verified设为true（禁用验证按钮），notVerified设为false（启用取消按钮）
    // this.verified = apiResponse.isVerified;
    // this.notVerified = !apiResponse.isVerified;
  }

  // 修正方法名拼写
  validationoftherapist(value: string) {
    const data = {
      verifiedBadge: value === 'true',
      _id: this.id
    };

    if (value === 'true') {
      // 验证后，验证按钮禁用，取消按钮启用
      this.verified = true;
      this.notVerified = false;
      this.validationImg.nativeElement.src = 'assets/img/verified-copy-3.png';
    } else {
      // 取消验证后，取消按钮禁用，验证按钮启用
      this.notVerified = true;
      this.verified = false;
      this.validationImg.nativeElement.src = 'assets/img/notverified-copy.png';
    }

    // 执行API调用
    // this.yourApiService.updateVerification(data).subscribe(...);
  }
}

修复后的HTML代码 #

<div class="col-lg-2 col-md-3 col-sm-3 col-xs-6">
  <button class="btn green-button" (click)="validationoftherapist('true');" [disabled]="verified" translate>
    Verify User
  </button>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
  <button class="btn red-button" (click)="validationoftherapist('false');" [disabled]="notVerified" translate>
    Cancel Verification
  </button>
</div>
<!-- 给图片添加模板引用变量，配合ViewChild使用 -->
<img #validationImg src="初始图片路径" alt="验证状态">

内容的提问来源于stack exchange，提问作者Jayna Tanawala