使用Material2 MdAutocomplete组件 - 如何使用onselect事件

Question

我正在尝试使用新的自动完成组件for material2 beta.2我可以让组件和选项菜单渲染得很好,但是一旦从列表中选择一个选项,我就无法弄清楚如何执行操作

<md-input-container dividerColor="accent" [mdTooltip]="hint" mdTooltipPosition="above">
     <input mdInput [formControl]="selectedInput" [mdAutocomplete]="auto" placeholder="text">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
     <md-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option }}</md-option>
</md-autocomplete>

我的最终目标是每次用户从列表中选择一个值时,可以填充一个名为selectedItems的变量,该变量位于我的组件中(可以多次选择).

我知道它与MdAutocompleteTrigger有关但我无法将这些碎片连接在一起.

Answer 1

UPDATE

有一个更好的解决方案:

使用md-option的onSelectionChange事件:

<md-autocomplete #appSearch="mdAutocomplete">
  <md-option *ngFor="let app of apps" [value]="app.name" (onSelectionChange)="onAppSelect(app)">
    {{ app.name }}
  </md-option>
</md-autocomplete>

旧

你可以使用displayWith这个:

<md-autocomplete
    [displayWith]="displayFnProject.bind(this)"
    #projectsAutoComplete="mdAutocomplete"
>

以bind功能是没有必要的,但在我的例子,我想访问该组件本身.:)

  // somethig is selected !!
  displayFnProject(prj: any) {
    console.log('selected', prj);

    this.filteredOptions.next([]); // clear suggestions -> we do not want to show options if we already selected something ! :)
    return prj ? prj.no : ''; // decide here what you want to display in that input-element !
  }

现场演示:https://plnkr.co/edit/gzjx0ZS9wvw49LWY7THx？p =preview