Question

我在我的应用中实现了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.

Answer 1

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

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

Angular2 md-autocomplete：如何管理onkeydown？

1 个答案: