Angular keyValue管道ngFor混合输入时数字失焦(trackBy无效)
Angular 表单项输入焦点丢失问题记录
问题上下文
- 待渲染的业务对象具备两类属性初始值:部分属性值为空字符串,其余属性默认值为数字0
- 页面渲染实现逻辑:
- 使用搭配
keyValue管道的*ngFor指令遍历该对象的所有属性,循环渲染对应输入表单项 - 为循环列表配置了
trackBy方法,目标是减少循环过程中不必要的DOM销毁、重建操作
- 使用搭配
异常表现
- 绑定数字类值的输入框,在用户输入数字内容时,会出现输入焦点自动丢失的问题,导致无法连续输入
- 绑定文本类值的输入框,在用户输入文本内容时,交互全程正常,无焦点丢失问题
- 问题可通过指定项目链接复现:问题复现代码
内容的提问来源于stack exchange,提问作者noob coder
相关产品推荐
相关产品推荐

