为什么 (keydown.enter) 和 (keydown) 不适用于列表？

Question

我有元素列表：

<div class="List">
<div class=" SearchListItem" [ngClass]="{ active: i == activeIndexResultItem }"
          *ngFor="let item of searchShortResultItems; let i = index"
          (mouseenter)="mouseEnterItem($event, i)" (keydown.enter)="searchByEnter($event, item)"
          (click)="selectSearchResult(item)"> {{ item.text }} 
        </div>
</div>

为什么 (keydown.enter) 不起作用？

searchByEnter(e, item) {
   console.log(e); // no invoke
}

我也试过改成：

(keydown)="searchByEnter($event, item)"

同样的结果

我也有一个重点：<divclass="List"#searchList>:

 if (this.searchList) {
      setTimeout(() => this.searchList.nativeElement.focus(), 50);
}

Answer 1

键盘事件仅在获得焦点的元素上分派。您可以添加 tabindex="0" 以使您的 DIV 可聚焦。

如果您的父元素获得焦点并且您只是跟踪列表中的当前元素 — 添加 (keydown.enter) 到父元素并将您的活动项目传递给该处理程序。

为什么 (keydown.enter) 和 (keydown) 不适用于列表？

Why (keydown.enter) and (keydown) dont work for list?

angular

angular6

angular8