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

Angular Material 2 Autocomplete, mat-option element doesn't trigger keyup event

提问人:Praveen Puglia 提问时间:12/4/2017 最后编辑:Praveen Puglia 更新时间:11/15/2023 访问量:27146

问:

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

事件绑定按预期工作,但事件绑定甚至只是事件不起作用。clickkeyup.enterkeyup

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

<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 事件 angular-material keyup

评论

0赞 HBK 12/4/2017
你能在Online IDE中分享你的代码吗?
0赞 SoEzPz 1/13/2023
我发现最好的方法是不使用 Angular 材料,而只使用 HTML 和 Angular。<div class=“use-angular-material-css-here” (keyup.enter)=“worksEveryTime('YES')”> 另外,您仍然可以获得与 matRipple 的视觉交互

答:

19赞 Prithivi Raj 12/4/2017 #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 ");
    }
  }

工作演示

评论

1赞 Praveen Puglia 12/4/2017
我希望事件来自选项而不是输入。我的期望是点击的工作方式,选项也应该有效。keyup.enter
0赞 Prithivi Raj 12/4/2017
我想,如果您想在更改时触发函数,请使用 onSelectionChange 事件。<mat-option (onSelectionChange)=“onEnter(val)” *ngFor=“let filteredStates 的状态 |async“ [值]=”state.name“>
0赞 Praveen Puglia 12/4/2017
onSelectionChange 如果选中,则除第一次外,对选项更改会触发两次。事件中的属性起初为 true,然后变为 false。这让我感到困惑isUserInput
0赞 Praveen Puglia 12/4/2017
我当然可以检查是否属实,然后才进行更改,但这不是一种糟糕的方法吗?isUserInput
0赞 Prithivi Raj 12/4/2017
这是角度材料中已经存在的问题,他们也给出了解决方法。github.com/angular/material2/issues/4094。在函数 onEnter(evt:any){if (evt.source.selected) {alert(“hello ”);您可以查看工作演示 stackblitz.com/edit/angular-material-autocomplete
2赞 Thức Trần 7/13/2021 #2

我用了:

<mat-option (onSelectionChange)="choose(item)" 
            *ngFor="let item of keyWord" value="{{item}}"> {{item}} </mat-option>
0赞 Vitor Antonio 10/7/2021 #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]
}
0赞 Snincent 11/15/2023 #4

autoActiveFirstOption

使用该指令,可以使用回车键触发事件。这正是我在尝试注册回车键事件时想要的行为。autoActiveFirstOptionoptionSelected

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