我有带有搜索表单的 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)