输入字段处于活动状态时单击事件未触发答案

【问题标题】：Click event not firing when input field is active输入字段处于活动状态时单击事件未触发
【发布时间】：2021-12-18 09:33:26
【问题描述】：

我有一个 Angular 项目，其设置类似于：

<input type="text" [(ngModel)]="search" >
<app-item-list
    [items]="foundItems"
    (itemClick)="onItemSelected($event)">
</app-item-list>

用户可以输入一个输入字段。当他们输入时，item-list 组件会填充结果。

在项目列表组件中，它只是显示所有传入的项目，如果单击一个，它会触发事件itemClick

只要输入保持活动状态，用户必须在项目上单击两次才能触发单击事件。单击其他任何位置（取消选择输入字段）然后单击一个项目也可以。

这应该是某种搜索“下拉框”，在其中键入会显示从其他地方获取的类似自动完成的选项列表。除了必须单击两次之外，它工作正常。第一次点击只会触发ngModelChange 事件，第二次点击会触发itemClick 事件。

更新：

这显然与app-iutem-list 组件的结构有关。这是里面的样子：

<button (click)="clickLog(1)"></button>
<ul>
    <li *ngFor="let item of items; let i = index" (click)="onItemClicked(i)">
        <button (click)="clickLog(2)"></button>
        <b class="title">{{ item.title }}</b>
        <div class="subtitle">{{ item.subtitle }}</div>
    </li>
</ul>

我添加了 2 个按钮，它们只是写入控制台。即使输入仍然处于活动状态，按钮 #1 也可以工作，而按钮 #2 则不能。

【问题讨论】：

标签： javascript angular

【解决方案1】：

click 是一个 DOM 事件，与更高级别的 ngModel 无关。正确的事件是 ngModelChange

<input type="text" [(ngModel)]="search" >
<app-item-list
    [items]="foundItems"
    (ngModelChange)="onItemSelected($event)">
</app-item-list>

【讨论】：

【解决方案2】：

这最终成为列表项在第一次点击时更新的问题。

点击其中一个项目时，ngModel 会触发一个更改事件，这将改变项目列表。新的项目列表将被传递给item-list 组件，在那里它将删除/更新整个列表并错过点击事件。

将trackBy 添加到*ngFor 以防止不必要的更新解决了该问题。

【讨论】：