Angular Material 2 自动完成，mat-option 元素不会触发 keyup 事件

Question

我正在寻找一种方法来确定何时单击或使用 Enter 键选择了

mat-option

内的

mat-autocomplete

。

click

事件绑定按预期工作，但

keyup.enter

甚至只是

keyup

事件不起作用。

这是库中的错误还是我做错了什么？

<mat-option (click)="onEnter()" (keyup.enter)="onEnter()" *ngFor="let state of filteredStates | async" [value]="state.name">

这是一个实例 - https://angular-3okq5u.stackblitz.io

更新：请提及是否有更好的方法来处理

<mat-option>

元素级别的选项选择。

Answer 1

如果您想在选项更改时触发功能，请在选项中使用 onSelectionChange 事件。如果您使用键盘选择您想要在此处实现的自动完成选项，它也会触发。

<input (keyup.enter)="onEnter($event)" matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete  #auto="matAutocomplete">
      <mat-option  (onSelectionChange)="onEnter($event)" (click)="onEnter()"  *ngFor="let state of filteredStates | async" [value]="state.name">
        <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
        <span>{{ state.name }}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>

更新

每当您更改选项时，

onSelectionChange 事件都会触发两次，这是因为 Angular 材料中存在问题。还给出了解决该问题的方法，您应该在函数内执行任何操作之前检查事件。

 onEnter(evt: any){
    if (evt.source.selected) {
    alert("hello ");
    }
  }

工作演示

Answer 2

我用过：

<mat-option (onSelectionChange)="choose(item)" 
            *ngFor="let item of keyWord" value="{{item}}"> {{item}} </mat-option>

Answer 3

我意识到，我们不需要处理 mat-option 元素上的 click 或 keyup.enter （这不起作用）事件，而是可以简单地监听 mat-select 元素本身的 SelectionChange 。这样键盘输入按下事件就可以正确触发。然后访问回调中选择的值，如下所示：

<mat-select [(value)]="selectedOption" (selectionChange)="setOption($event)">
    <mat-option *ngFor="let option of options" [value]="option.value" [attr.arialabel]="option.value">
      {{ lang.name }}
    </mat-option>
  </mat-select>

然后，像这样处理：

setOption(optionChangedEvent: MatSelectChange) {
   console.log(optionChangedEvent.value);
   [rest of logic goes here]
}

Answer 4

autoActiveFirstOption

使用

autoActiveFirstOption

指令，可以通过 Enter 键触发

optionSelected

事件。这正是我在尝试注册 Enter 键事件时想要的行为。

<mat-autocomplete autoActiveFirstOption (optionSelected)='setSearchValue($event.option.value)'>