Angular中InputElement值更新异常：一个更新一个失效的问题求助

核心原因 #

你第二个<input>的模板引用变量#preset和组件类里的变量preset重名了，导致模板中的{{preset}}实际指向的是input DOM元素，而非你在.ts文件中更新的组件变量，所以赋值后界面无法同步更新。

具体解决步骤 #

1. 修改模板引用变量名，避免和组件变量冲突：
   将无法更新的input标签里的#preset改成其他名称，比如#presetInput：

   <input type="number" id="presettype" prevValue="0" #presetInput class="preset-input" value="{{preset}}" />
   

2. 推荐使用Angular双向绑定语法（更规范，避免插值表达式的潜在问题）：
   如果你已经引入了FormsModule，可以用[(ngModel)]替代value="{{}}"：

   <!-- 正常更新的input也可以统一改成双向绑定 -->
   <input type="number" #reference class="height-20 counter-container" id="speedId" prevValue="0.0" [(ngModel)]="speed">
   <!-- 修改后的preset input -->
   <input type="number" id="presettype" prevValue="0" #presetInput class="preset-input" [(ngModel)]="preset" />
   

   注意：使用ngModel需要在模块中导入FormsModule（在app.module.ts或对应功能模块中）：

   import { FormsModule } from '@angular/forms';
   
   @NgModule({
     imports: [
       // ...其他导入
       FormsModule
     ]
   })
   export class YourModule { }
   

3. 验证组件变量类型：
   确保.ts文件中preset的初始值类型和赋值的value2类型匹配（比如都是数字类型），如果类型不匹配可能导致渲染异常。

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