Implementé el autocompletado de material Angular2 en mi aplicación. Y ahora estoy buscando una forma de administrar correctamente la función keydown.enter .

Debido a que la función de clic a continuación funciona de la manera que espero, naturalmente lo intenté:

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

Pero la función no se activa. Si muevo la función keydown.enter en md-input-container , así:

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

Funciona, pero luego ya no tengo acceso a mi elemento del elemento...

Estoy seguro de que hay una manera simple de evitar esto, pero no he podido resolverlo. ¿Cómo puedo obtener mi objeto de artículo dentro md-input-container ?

Aquí hay un Plunker.