如何在mat-autocomplete angular 6中用tab键代替回车键选择建议？

Question

如 MatAutocomplete (Angular 6)的默认行为是 keydown 和 keyup 用于选择选项和 Enter 为选择的输入值。

我想使用 tab 而不是 enter 键。

请建议

代码：MatAutocomplete(Angular 6)的默认行为是按下键和按上键选择选项，按回车键选择输入值。

<input matInput [matAutocomplete]="origin">
<i class="material-icons search-form-icon">place</i>

<mat-autocomplete #origin="matAutocomplete">
    <mat-option  *ngFor="let v of originList" [value]="v.value"> {{v.text}} </mat-option>
</mat-autocomplete>

Answer 1

查看 MatAutocompleteTrigger 文档中详细介绍了这个触发器的工作原理和它所提供的观测值。

解决方法：在你的组件中设置一个ChildView属性，这个属性就是你模板中的这个MatAutocompleteTrigger。

在你的组件中设置一个ChildView属性，这个属性就是你模板中的MatAutocompleteTrigger。

@ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;

在AfterViewInit生命周期钩子中的这个触发器属性上订阅panelClosingActions。将FormControl值设置为触发值的activeValue。

ngAfterViewInit() {
    this.trigger.panelClosingActions.subscribe(() => {
        myControl.setValue(this.trigger.activeOption.value);
    });
}

适当添加空检查。