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

触发垫以编程方式自动完成

1 个答案: