Question

sample.html

<input #gb type="text" pInputText class="ui-widget ui-text" [(ngModel)]
="filterText"  (ngModelChange)="filterText = $event; clearFilter(filterText)"/>

componentsnent.ts

 clearFilter(value) {
                alert(value);// values is empty
            }

此警报将触发输入字段上的每个焦点（in | out）。如果模型对象有任何更改，我想要执行该功能。

如何处理它以及为什么ngModelChange事件在输入框上进出焦点时会触发？

Answer 1

因为他们的工作是处理文本框中的更改你有焦点和模糊方法

<input #gb type="text" pInputText class="ui-widget ui-text" 
  [(ngModel)] ="filterText" 
  (ngModelChange)="clearFilter(filterText)"
  (blur)="clearFilter($event)"
  (focus)="clearFilter($event)"/>

LIVE DEMO

根据评论更新

由于您正在使用[(ngModel)]和(ngModelChange)，因此它正在触发。

Answer 2

如果使用 *ngFor 时 ngModel 值发生变化，解决方案是 trackBy

此处演示：https://stackblitz.com/edit/angular-zwnges?file=app%2Fapp.component.html

为什么ngModelChange事件在输入框上进出焦点时会触发？

2 个答案: