如何正确使用Angular2 MaterialDesign中的自动完成组件？

Question

我一直在尝试使用 Angular Material2 中的自动完成组件。但我有一些疑问。

1. 如何从 HTTP 服务加载建议数据，并即时过滤此列表？

2. 如何在我的组件中访问选定的选项（对象）？

3. 有没有办法用 HTML（多行值）格式化选定的选项，比如在 PrimeNg 上使用 pTemplate 自动完成？

示例： https://embed.plnkr.co/vR9QLk/

Answer 1

你可以借助函数获取选中项，你的选中项在对象selectedOption

displayFn(state: ExampleDataMode): string {
        this.selectedOption = state;
        console.log(this.selectedOption);///displays the selected item
        return state ? state.name : '';

    }

此外，您可以处理用于从下拉列表中选择项目并将它们绑定到对象的事件

 <md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
      <md-option *ngFor="let state of filteredStates | async" [value]="state" (click)="selectedItem=state">
      {{ state.name }}
      </md-option>
    </md-autocomplete>

您将在您的 selectedItem 对象中拥有选定的项目。

注意：以上仅在用户点击项目时处理，如果用户通过需要单独处理的键事件进行选择则不起作用。

LIVE DEMO