Angular 4输入框报错TypeError: this.changeHook is not a function求排查思路

嘿，这个问题我之前碰到过类似的，结合你说的仅第二个输入框报错、每输入一个字符就触发一次的情况，给你几个针对性的排查方向：

• 先排查*ngFor遍历与输入框绑定的问题

  • 首先检查第二个输入框的ngModel或响应式表单控件绑定逻辑：是不是在遍历过程中，第二个reasoncode对应的绑定变量被意外赋值成了非函数类型，却在变更回调里被当成函数调用？比如组件里有没有某个地方把changeHook作为变量名，覆盖了表单控件的内置回调？
  • 另外，给*ngFor加上trackBy函数试试！如果没加trackBy，每次输入触发变更检测时，Angular可能会重新渲染整个列表项，导致第二个输入框的控件实例异常，进而触发错误的changeHook调用。示例代码：

    <ng-container *ngFor="let reasoncode of displayReasonCodes$ | async; trackBy: trackById">
      <!-- 你的输入框代码 -->
    </ng-container>
    

    组件里实现trackById：

    trackById(index: number, item: any): number {
      return item.id; // 替换成reasoncode的唯一标识字段
    }
    

• 检查自定义指令或表单控件的初始化

  • 如果你给输入框用了自定义指令，或者实现了自定义表单控件，第二个输入框对应的控件实例可能没正确初始化changeHook。比如自定义控件需要通过registerOnChange方法设置这个回调，但如果第二个控件的这个方法没执行，changeHook就会是undefined，输入时调用就报错。
  • 要是用的模板驱动表单，确认第二个输入框绑定的变量在组件里有没有正确声明，会不会在循环里被意外覆盖？比如有没有把变量名和changeHook重名了？

• 用调试工具定位错误源头

  • 打开浏览器开发者工具的Sources面板，在报错的行上加断点，输入字符触发错误后查看调用栈，就能看到是Angular哪个内部方法触发了this.changeHook()，以及this指向的对象是什么——这能直接帮你定位到是哪个控件或组件出了问题。
  • 也可以在组件的ngAfterViewInit里打印第二个输入框对应的控件实例，看看它的changeHook属性值是不是undefined或者非函数类型。

• 排查异步数据加载的影响

  • 你的displayReasonCodes$是Observable，可能第二个reasoncode是后续异步加载进来的，导致输入框初始化时没有正确绑定表单控件。比如如果用的是表单数组，要确保每个新加的reasoncode都正确添加了FormControl实例，没有遗漏初始化步骤。

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