Angular2 md-autocomplete: Wie man onkeydown verwaltet?

Question

Ich habe Angular2 Material Autocomplete in meiner App implementiert. Und ich suche jetzt nach einer Möglichkeit, die keydown.enter Funktion richtig zu verwalten.

Da die Klick-Funktion unten funktioniert, wie ich erwarte, versuche ich natürlich:

<md-input-container> 
<input type="text" placeholder={{appName}} mdInput [formControl]="term" [mdAutocomplete]="auto"> 
</md-input-container> 
<md-autocomplete #auto="mdAutocomplete" md-focus> 
<md-option *ngFor="let item of items" [value]=item.title (click)="loadData(item)" (keydown.enter)="loadData(item)">    
    <span>{{item.title}}</span> 
</md-option> 
</md-autocomplete> 

Aber die Funktion ausgelöst wird, nicht. Wenn ich die keydown.enter Funktion in md-input-container, wie diese bewegen:

<md-input-container > 
<input type="text" placeholder={{appName}} mdInput [formControl]="term" [mdAutocomplete]="auto" (keydown.enter)="loadData(item)"> 
</md-input-container> 
<md-autocomplete #auto="mdAutocomplete" md-focus> 
<md-option *ngFor="let item of items" [value]=item.title (click)="loadData(item)">    
    <span>{{item.title}}</span> 
</md-option> 
</md-autocomplete> 

Es funktioniert, aber dann habe ich keinen Zugriff auf mein Artikel Element mehr ...

Ich bin sicher, es gibt eine einfache um dieses herum, aber ich konnte es nicht herausfinden. Wie kann ich mein Artikelobjekt innerhalb von md-input-container bekommen?

Hier ist ein Plunker.

Answer 1

Sie können das ausgewählte Element in md-Option erhalten, indem (onSelect)="loadData(item)" anstelle der ‚Klick‘ und ‚keyDown‘ Funktionen aufrufen.

Bearbeiten: Wie von Joshua unten angegeben, sollten Sie jetzt onSelectionChange Ereignis aufrufen.