Angular中input用ngValue报错：Can't bind to 'ngValue'的解决方法

嘿，这个问题我之前也踩过坑！咱们先搞明白报错的根源，再一步步把代码改对：

错误原因 #

ngValue是Angular专门给<select>标签里的<option>元素设计的指令，用来绑定复杂类型的值。普通的文本<input>根本不支持这个属性，所以Angular才会报错说找不到这个绑定属性。

正确修改方案 #

我们的目标是让ubicacion和categoria既有初始默认值，又能通过输入框修改，只需要调整两处代码：

1. 在component.ts里初始化默认值
   不用把变量留空，直接给它们设置你原本的固定初始值，这样双向绑定一开始就有正确的初始值：

ubicacion = 'Cusco';
categoria = 'Arte y Antiguedades';

getAvisos() {
  this.avisos = this.fs.filterByAll(this.ubicacion, this.categoria);
}

2. 修改component.html里的输入框代码
   删掉没用的[ngValue]属性，只保留双向绑定[(ngModel)]就够了——ngModel会自动同步输入框的值和组件里的变量：

<input type="text" [(ngModel)]="ubicacion" />
<input type="text" [(ngModel)]="categoria" />

如果非要在HTML里显式写初始值（其实更推荐在TS里初始化，逻辑更集中），可以用value属性，但要注意TS里的初始值会覆盖这里的value：

<input type="text" [(ngModel)]="ubicacion" value="Cusco" />
<input type="text" [(ngModel)]="categoria" value="Arte y Antiguedades" />

额外注意点 #

别忘了确保你的模块（比如AppModule或者对应功能模块）已经导入了FormsModule，因为使用ngModel必须依赖这个模块：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已导入的模块...
    FormsModule
  ],
  // 模块其他配置...
})
export class AppModule { }

这样修改后，输入框就能正常显示初始值，修改后的值也能同步到组件变量里，调用getAvisos()时就能拿到最新的筛选条件啦！

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