Angular 5 : 触发 mat-autocomplete on pressing a particular key

Question

我正在尝试想出类似 Facebook 上的标记功能的东西，即每当按下“@”键时，我的自动完成应该被触发，我应该能够看到与输入的数据对应的选项 post '@'.

我无法在按键按下（或任何按键事件）时绑定自动完成功能

任何关于如何实现此功能的建议将不胜感激，我最后的选择是提出我自己的自动完成模块

Answer 1

您可以执行以下操作来完成此操作。

创建一个 ViewChild 以获取对 MatAutocompleteTrigger

的引用

@ViewChild(MatAutocompleteTrigger) _auto: MatAutocompleteTrigger;

创建一个HostListener设置formControl值为@并在按下@键时打开面板

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    if (event.key == '@') {
      this.stateCtrl.setValue('@');
      this._auto.openPanel();
    }
  }

Stackblitz

在此 stackblitz 中，单击视图以设置焦点，否则事件将不会触发 HostListener

https://stackblitz.com/edit/angular-4x3zte?embed=1&file=app/autocomplete-overview-example.ts

Angular 5 : 触发 mat-autocomplete on pressing a particular key

Angular 5 :Trigger mat-autocomplete on pressing a particular key

angular-material

angular

angular5