Angular2 md-autocomplete:如何管理onkeydown?

时间:2017-04-27 12:28:36

标签: angular typescript angular-material

我在我的应用中实现了Angular2素材自动填充功能。我现在正在寻找一种正确管理keydown.enter功能的方法。

因为下面的点击功能按照我的预期方式工作,我自然会尝试:

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

但是没有触发该功能。 如果我在keydown.enter中移动md-input-container函数,就像这样:

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

它有效,但后来我再也无法访问我的item元素了......

我确信这有一个简单的方法,但我还没能弄明白。如何在md-input-container内获取我的项目对象?

这是Plunker.

1 个答案:

答案 0 :(得分:2)

您可以通过拨打(onSelect)="loadData(item)"而不是点击&#39;来获取md-option中的所选项目。和&#39; keydown&#39;功能。

编辑:正如下面的约书亚所指出的,你现在应该致电onSelectionChange事件。