Angular 2中[attr.disabled]绑定不生效问题求助

哦，这个坑我之前刚踩过！其实问题出在HTML布尔属性的特性和Angular绑定方式的选择上。

为什么输入框始终禁用？ #

HTML里的布尔属性（比如disabled、checked）有个特殊规则：只要这个属性存在，不管它的值是true还是false，元素都会触发对应的状态。

你用[attr.disabled]绑定布尔值时，Angular的处理是：

• 当disabledInput = true，生成的HTML是 <input disabled="true" ...> —— 浏览器看到disabled属性，直接禁用输入框
• 当disabledInput = false，生成的HTML是 <input disabled="false" ...> —— 浏览器依然会因为disabled属性存在，判定输入框禁用

说白了，[attr.disabled]是在操作HTML属性的值，但对于布尔属性来说，存在性才是关键，不是值。

正确的解决方法 #

把[attr.disabled]换成Angular专门针对布尔属性的绑定语法[disabled]：

修改后的home.component.html代码：

<div class="input-field"> 
  <input [disabled]="disabledInput" [value]="userClaims.UserId" type="text" class="validate"> 
</div>

（另外提一句，value用[value]属性绑定比插值表达式{{}}更符合Angular的最佳实践，不过两种写法都能正常工作～）

用[disabled]绑定后，Angular会智能处理：

• 当disabledInput = true，自动添加disabled属性，输入框禁用
• 当disabledInput = false，自动移除disabled属性，输入框恢复可编辑

这样就能根据你的布尔变量正确控制输入框状态啦！

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