Question

我正在尝试在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);
  }

Answer 1

您的方法存在的问题是，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

实现MatAutocompleteTrigger的openPanel（）方法

1 个答案: