如何在 AutoComplete Material2 中使用 [displayWith] 显示 [英] How to display using [displayWith] in AutoComplete Material2

问题描述

我有一个来自我的 API 的 array，我正在使用 Material2#AutoComplete 来过滤这个......到目前为止它正在工作，但是我无法显示另一个属性而不是选项中的绑定值.

I have an array that comes from my API and I'm using Material2#AutoComplete to filter this... it's working so far, however I'm in trouble to display the another property instead of the binded value in option.

我知道我必须使用 displayWith，但是它并没有像我期望的那样工作.名为 [displayWith]="displayFn.bind(this)"> 的函数只返回 id，我怎样才能获得完整的对象并返回 <功能上的代码>名称.

I know I have to use displayWith, however it isn't working as I'm expecting. The function called as [displayWith]="displayFn.bind(this)"> just returns me the id, how can I get the full object and so return the name on function.

顺便说一句，我仍然希望在我的 FormControl 中绑定 id.

BTW, I still want to have the id binded in my FormControl.

一些代码:

组件:

export class AutocompleteOverviewExample {
  stateCtrl: FormControl;
  filteredStates: any;

  states = [
    { 
      id: 1,
      name: 'Alabama'
    },
    {
      id: 2,
      name: 'North Dakota'
    },
    {
      id: 3,
      name: 'Mississippi'
    }
  ];

  constructor() {
    this.stateCtrl = new FormControl();
    this.filteredStates = this.filterStates('');
  }

  onKeyUp(event: Event): void {
    this.filteredStates = this.filterStates(event.target.value);
  }

  filterStates(val: string): Observable<any> {
    let arr: any[];
    console.log(val)
    if (val) {
      arr = this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s.name));
    } else {
      arr = this.states;
    }

    // Simulates request
    return Observable.of(arr);
  }

  displayFn(value) {
    // I want to get the full object and display the name
    return value;
  }
}

模板:

<md-input-container>
  <input mdInput placeholder="State" (keyup)="onKeyUp($event)" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

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

基本上和这个问题(不幸的是，两个答案都不正确或抛出错误).

Basically, it's almost the same as this question (unfortunately both answers are incorrect or throw errors).

这是PLUNKER.

推荐答案

如果你想用 md-options 绑定整个对象，那么你应该用 state<绑定到 option/code> 并在 displayFn 处返回 state.name 这样你就不必绑定 this.

If you want the entire object to be binded with md-options, then you should bind to option with state and return state.name at displayFn and this way you don't have to bind this.

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

displayFn(state) {
  return state.name;
}

演示工具.

如果你只想绑定 state.id 到 md-options，你必须遍历 states 来找到 state.name 基于state.id，这样绑定this是需要的.

and if you want to bind only state.id to md-options, you have to loop through states to find state.name based on state.id and this way binding this is needed.

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

displayFn(id) {
  if (!id) return '';

  let index = this.states.findIndex(state => state.id === id);
  return this.states[index].name;
}

演示工具.

这篇关于如何在 AutoComplete Material2 中使用 [displayWith] 显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！