Angular Material 2 Autocomplete, Mat-Option Element löst Keyup-Ereignis nicht

Question

Ich bin auf der Suche nach einer Möglichkeit herauszufinden, wenn ein mat-option innerhalb der mat-autocomplete wurde entweder angeklickt oder wurde mit der Enter-Taste ausgewählt. Die click Ereignisbindung funktioniert wie erwartet, aber das keyup.enter oder auch nur das keyup Ereignis funktioniert nicht.

Ist das ein Fehler in der Bibliothek oder mache ich etwas falsch?

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

Hier ist ein anschauliches Beispiel - https://angular-3okq5u.stackblitz.io

Update: Bitte erwähnen Sie, ob es einen besseren Weg, um die Auswahl einer Option am <mat-option> Elementebene zu behandeln.

Answer 1

Verwenden Sie das onSelectionChange-Ereignis in Optionen, wenn Sie eine Funktion beim Ändern der Option auslösen möchten. Es wird auch ausgelöst, wenn Sie mit der Tastatur die Auto-Vervollständigen-Option auswählen, die Sie hier erreichen möchten.

<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> 

aktualisieren

OnSelectionChange Ereignis auslöst zweimal, wenn Sie die Option zu ändern und es ist wegen der existing issue in Angular material. Um dieses Problem zu beheben, sollten Sie das Ereignis überprüfen, bevor Sie etwas in der Funktion ausführen.

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

Working demo