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

Question

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

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

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

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

示例： 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