小编min*_*ise的帖子

Angular 7 - 使 div 上的 keydown 事件不起作用

我有带有搜索表单的 Angular 7 应用程序。当输入表单时,我会过滤输出并将输出显示为 div 列表。当使用(单击)事件时,我可以选择并触发功能,但是当尝试使用(keydown)事件时,它不起作用。

<input type="text" class="form-control" 
id="licensePlate" 
aria-describedby="licensePlate" 
name="licensePlate" #licensePlate="ngModel" 
required minlength="2" [(ngModel)]="carModel" [ngbTypeahead]="carAutoComplete" 
[inputFormatter]="CarFormatter" 
[resultTemplate]="carTemplate">

Run Code Online (Sandbox Code Playgroud)

使用鼠标工作:

<ng-template #carTemplate let-r="result" let-t="term">
    <div (click)="searchCar(r.id)">{{ r.licensePlate }} - {{ r.make }} {{ r.carModel }}</div>
</ng-template>
Run Code Online (Sandbox Code Playgroud)

无法使用键盘

<ng-template #carTemplate let-r="result" let-t="term">
    <div (keydown)="keyDownFunction($event)" tabindex="0">{{ r.licensePlate }} - {{ r.make }} {{ r.carModel }}</div>
</ng-template>
Run Code Online (Sandbox Code Playgroud)

这是我的 TS 代码:

carAutoComplete = (text$: Observable<string>) =>
  text$.pipe(
    debounceTime(200),
    distinctUntilChanged(),
    map(term => term.length < 2 ? []
      : this.carsList.filter(v => v.licensePlate.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10))
  ) …
Run Code Online (Sandbox Code Playgroud)

keydown angular

2
推荐指数
1
解决办法
9655
查看次数

标签 统计

angular ×1

keydown ×1