Angular Material 2 Autocomplete，mat-option 元素不会触发 keyup 事件答案

【问题标题】：Angular Material 2 Autocomplete, mat-option element doesn't trigger keyup eventAngular Material 2 Autocomplete，mat-option 元素不会触发 keyup 事件
【发布时间】：2018-05-17 15:53:50
【问题描述】：

我正在寻找一种方法来确定mat-autocomplete 内的mat-option 何时被单击或使用回车键选择。

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> 元素级别的选项选择，请说明。

【问题讨论】：

你能在网上分享你的代码吗？？

标签： javascript angular events angular-material keyup

【解决方案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 事件都会触发两次，这是因为existing issue in Angular material。还给出了解决该问题的方法，即您应该在函数内执行任何操作之前检查事件。

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

Working demo

【讨论】：

我希望事件来自选项而不是输入。我的期望是 click 的工作方式，选项上的 keyup.enter 也应该工作。
如果你想触发一个你想要做的改变的函数，我猜使用 onSelectionChange 事件。
onSelectionChange 如果您选中第一个选项更改，则会触发两次以进行选项更改。事件中的isUserInput 属性起初为真，然后变为假。这让我感到困惑
我当然可以检查isUserInput 是否为真，然后才进行更改，但这不是一个坏方法吗？
这是角材料中已经存在的问题，他们也提供了解决方法。 github.com/angular/material2/issues/4094。在函数 onEnter(evt:any){if (evt.source.selected) {alert("hello "); 执行任何操作之前检查事件} } 你可以查看工作演示 stackblitz.com/edit/angular-material-autocomplete

【解决方案2】：

我用过：

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

【讨论】：

【解决方案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]
}

【讨论】：