实现MatAutocompleteTrigger的openPanel()方法

时间:2019-04-15 14:23:36

标签: angular angular-material

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

1 个答案:

答案 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