Question

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

我知道我必须使用displayWith，但它并不像我期待的那样工作。名为[displayWith]="displayFn.bind(this)">的函数只返回id，如何获取完整对象，因此返回name函数。

顺便说一句，我仍然想在我的 FormControl 中绑定ID。

一些代码：

组件：

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>

基本上，它与this question几乎相同（不幸的是，两个答案都不正确或抛出错误）。

这里是PLUNKER。

Answer 1

如果您希望整个对象与md-options绑定，那么您应该绑定到state的选项并在state.name返回displayFn，这样您就不会＃ 39; t必须绑定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;
}

<强> demo plunker

如果您只想将state.id绑定到md-options，则必须循环浏览states以基于state.name查找state.id并以此方式绑定<{1}}是必需的。

this

<强> demo plunker

如何在AutoComplete Material2中使用[displayWith]显示

1 个答案: