Angular Material 2 自动完成,mat-option 元素不触发 keyup 事件
Angular Material 2 Autocomplete, mat-option element doesn't trigger keyup event
我正在寻找一种方法来确定 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>
元素级别的选项选择。
如果要在选项更改时触发函数,请在选项中使用 onSelectionChange 事件。如果您使用键盘 select 您试图在此处实现的自动完成选项,它也会触发。
<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 ");
}
}
我用过:
<mat-option (onSelectionChange)="choose(item)"
*ngFor="let item of keyWord" value="{{item}}"> {{item}} </mat-option>
我意识到我们可以简单地在 mat-select 元素本身。这样键盘输入按下事件就会被正确触发。然后像这样在回调中访问值 selected:
<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]
}
我正在寻找一种方法来确定 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>
元素级别的选项选择。
如果要在选项更改时触发函数,请在选项中使用 onSelectionChange 事件。如果您使用键盘 select 您试图在此处实现的自动完成选项,它也会触发。
<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 ");
}
}
我用过:
<mat-option (onSelectionChange)="choose(item)"
*ngFor="let item of keyWord" value="{{item}}"> {{item}} </mat-option>
我意识到我们可以简单地在 mat-select 元素本身。这样键盘输入按下事件就会被正确触发。然后像这样在回调中访问值 selected:
<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]
}