Angular 5：按下特定键时触发垫子自动完成答案

【问题标题】：Angular 5 :Trigger mat-autocomplete on pressing a particular keyAngular 5：按下特定键时触发垫子自动完成
【发布时间】：2019-03-27 14:22:17
【问题描述】：

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

我无法在 keydown（或任何关键事件）上绑定自动完成

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

【问题讨论】：

显示尝试过的代码或提供 Stackblitz（如果可能）

标签： angular angular-material angular5

【解决方案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中，点击视图设置焦点，否则事件不会触发HostListener

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

【讨论】：

这看起来很棒！我会试试这个并回复你
这没有回答我如何为表单字段的一部分分配自动完成功能，而不是替换整个字段的数据