如何正确使用Angular2 MaterialDesign中的自动完成组件? [英] How to use correctly autocomplete component from 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.

实时演示

LIVE DEMO

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