我正在尝试在keyup.ArrowDown事件上打开建议面板。如果按下向下箭头按钮,那么我想在自动建议面板中显示所有值
这是我的代码示例。我已经在SO上找到了此方法的各种示例,但在我的情况下似乎都没有用。
<form class="declarationType">
<mat-form-field class="example-full-width">
<input matInput aria-label="State" [matAutocomplete]="auto" [formControl]="typeCtrl" (keyup.ArrowDown)="openAutocomplete($event)">
<mat-autocomplete #auto="matAutocomplete" [panelWidth]="700" >
<mat-option *ngFor="let type of declarationTypes$ | async" [value]="type.value" class="comboBox" >
<span>{{type.value}}</span> |
<small>{{type.declarationTypeCodeDescription}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
@ViewChild(MatAutocompleteTrigger) inputAutoComplit: MatAutocompleteTrigger;
......
openAutocomplete() {
setTimeout(() => {
this.inputAutoComplit.openPanel();
}, 0);
}
答案 0 :(得分:0)
您的方法存在的问题是,input
必须针对(keyup.ArrowDown)
才能启动...如果考虑到这一点,则在{{1} },无法达到使用input
的目的。
只有在您在(keyup.ArrowDown)
内单击后,以下内容才会起作用,这将打开input
,然后单击autoComplete
。
ArrowDown
您正在寻找的是openAutocomplete() {
console.log('ArrowDown Clicked')
}
的文档级别的侦听器,它将打开ArrowDown
,而autoComplete
不会聚焦。
获取对input
MatAutocompleteTrigger
设置import { MatAutocompleteTrigger } from '@angular/material'
@ViewChild(MatAutocompleteTrigger) _auto: MatAutocompleteTrigger;
以便在看到HostListener
键事件时调用openPanel()
。
ArrowDown
Stackblitz
您需要单击此堆叠闪电中输入下方的白色区域以使文档聚焦(不要单击/仅使输入聚焦),然后按@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
if (event.key == 'ArrowDown') {
this._auto.openPanel();
}
}
打开ArrowDown
https://stackblitz.com/edit/angular-vtepne?embed=1&file=app/autocomplete-simple-example.ts