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

Question

我正在尝试为 material2 beta.2 使用新的自动完成组件我可以让组件和选项菜单呈现得很好，但是一旦我 select 列表中的一个选项

我无法弄清楚如何执行操作

<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

更新

有更好的解决方案：

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

Answer 2

在较新的版本中，自动完成组件有一个输出 optionSelected。

<form>
    <mat-form-field>
        <input matInput placeholder="Select" [matAutocomplete]="auto" [formControl]="input">

        <mat-autocomplete (optionSelected)="someFn()" #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">
                <span>{{option}}</span>
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

并获取输入值

public input: FormControl = new FormControl('');

public someFn(): void {
    const value = this.input.value;
}

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

Using Material2 MdAutocomplete component - how to use onselect event

angular

angular-material2