angular - 以编程方式触发 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