Question

我试图提出类似Facebook上的标记功能的方法，即每当按下'@'键时，我的自动完成功能应被触发，并且我应该能够看到与数据类型为'@'相对应的选项。 / p>

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

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

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

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

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

角度5：按特定键时触发垫自动完成

1 个答案: