Angular2中Input框disabled属性失效：条件为假仍禁用

先帮你拆解下当前的绑定逻辑：已知isEditMode = true，authService.GetHighestRoleLevel() = 3，你的disabled条件展开后是：

true && !(3 <= roleLevel.Instance)

你说条件结果为false但输入框仍处于禁用状态，大概率是下面几个常见问题导致的：

• 变量拼写错误导致取值异常
  你贴的代码里roleLevel.Instan...明显没写完，会不会实际代码里把roleLevel.Instance拼错了？比如写成Instan或者其他错误拼写？如果roleLevel.Instance因为拼写错误变成undefined，那3 <= undefined会返回false，!(false)就是true，整个条件就变成true && true = true，输入框自然就被禁用了。这是最容易踩的低级坑，先优先检查这个。

• 数据类型不匹配导致比较结果出错
  确认authService.GetHighestRoleLevel()返回的是数字类型还是字符串类型。如果返回的是字符串"3"，而roleLevel.Instance是数字，那跨类型的比较可能得出不符合预期的结果（比如"3" <= 2会因类型转换逻辑得出错误结论）。可以试着把比较逻辑改成强制统一类型：

  Number(authService.GetHighestRoleLevel()) <= roleLevel.Instance
  

  统一类型后再测试结果。

• ngModel与disabled的表单状态冲突
  在Angular模板驱动表单中，同时使用[(ngModel)]和[disabled]时，表单控件的状态偶尔会被ngModel的注册逻辑覆盖。你可以试试把[disabled]换成[attr.disabled]，或者在组件类里封装一个计算属性来统一控制状态，比如：

  get isOdometerDisabled(): boolean {
    return this.isEditMode && !(this.authService.GetHighestRoleLevel() <= this.roleLevel.Instance);
  }
  

  然后模板里用[disabled]="isOdometerDisabled"，这样逻辑更清晰，也方便调试。

• 变更检测未触发导致视图未更新
  如果isEditMode或者roleLevel.Instance是在异步操作（比如API请求、setTimeout）中更新的，可能没触发Angular的变更检测，导致视图没同步最新状态。可以在更新变量后手动触发变更检测：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  // 更新变量后调用
  this.cdr.markForCheck();
  

建议先从检查拼写和数据类型开始，这两个是最常见的原因，排查起来也最快。

内容的提问来源于stack exchange，提问作者Tejas Thakor