以编程方式触发 matAutocomplete

Question

仅当输入文本末尾写入特殊字符时，我才想触发自动完成。

例如，当用户键入：“ @”时，应该出现自动完成。

这是我的代码：

<mat-form-field>
  <input #myInput type="text" matInput [formControl]="myControl" [matAutocomplete]="myInput.value.slice(-1) == '@' ? auto : false">
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
</mat-autocomplete>

自动完成会出现，但会自动消失。有没有办法做到这一点？

Answer 1

这种方式对我有用。

添加(keydown.@)="onKeydown($event)"到html文件

<mat-form-field>
  <input #myInput type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" (keydown.@)="onKeydown($event)" >
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
</mat-autocomplete>

在组件ts文件中

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

onKeydown(e){
    this.autocomplete.openPanel();
  }

演示：https://stackblitz.com/edit/angular-keyup-open-panel