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

问题描述

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

I have been trying to use the autocomplete component from Angular Material2. But I have some doubts.

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

1. How to load suggestion data from HTTP service, and filter this list on the fly?

如何访问组件中选定的选项(对象)?

How to get access to selected option(object) in my component?

有什么方法可以使用 HTML(多行值)格式化所选选项，例如使用 pTemplate 在 PrimeNg 自动完成上?

Is there any way to formatting selected option with HTML (multiline values), like on PrimeNg autocomplete using pTemplate?

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

推荐答案

你可以通过函数的帮助获取选中项，你在对象中拥有选中项selectedOption

You can get the selected item with help of the function, you have your selected item in the object selectedOption

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

    }

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

Also, you can handle the events that are used to select the item from the dropdown and bind them to object as

 <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 对象中拥有所选项目.

and you will have the selected Item in your selectedItem object.

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

Note: The above handles only if the user clicks on the item, where as it wont work if the user selectes through key events which needs to be handled separately.

现场演示

这篇关于如何正确使用 Angular2 MaterialDesign 中的自动完成组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！