AngularJS 4如何监听输入框内容变化？两种尝试方法均无效

嘿，我懂你碰到的麻烦了！你用的应该是Angular 2及以上版本，而不是AngularJS（1.x），所以之前试的ng-change和拼写错误的ngChange都起不了作用——这俩都是AngularJS的语法，Angular已经换了一套写法啦。

针对你想监听用户输入新字符的需求，给你两种靠谱的方案：

方案1：使用(input)事件（最直接） #

这个事件会在用户每输入一个字符、删除字符时实时触发，完美匹配你要监听输入动作的需求。代码写法如下：

<input type="text" [(ngModel)]="tempNode.cost_center" (input)="action()">

只要用户在输入框里有内容变动，action()方法就会立刻被调用。

方案2：使用ngModelChange事件（适合需要处理值的场景） #

如果需要在值更新前后做一些额外处理（比如校验、格式化），可以用这个事件。注意这里要把双向绑定拆成单向绑定+事件绑定，手动更新值：

<input type="text" [ngModel]="tempNode.cost_center" (ngModelChange)="handleCostCenterChange($event)">

然后在组件的TypeScript代码里实现对应的方法：

handleCostCenterChange(newValue: string) {
  // 这里可以先对新值做自定义处理
  this.tempNode.cost_center = newValue;
  // 调用你的action方法
  this.action();
}

简单总结：如果只是单纯监听输入动作，方案1足够用；如果需要干预值的更新过程，方案2更合适。

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