如何在自动完成材料2中使用[displayWith]显示

Question

我有一个array来自我的API，我使用Material2#AutoComplete来过滤这个...它工作到目前为止，但我有麻烦显示另一个物业而不是绑定值选项。

我知道我必须使用displayWith，但它并不像我期待的那样工作。函数[displayWith]="displayFn.bind(this)">只是返回我，我怎么能得到完整的对象，因此返回函数name。

顺便说一句，我仍然希望我的ID绑定在我的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> 

基本上，这是几乎一样this question（不幸的是，两个答案都不正确或抛出错误）。

这是PLUNKER。

Answer 1

如果你想整个对象与md-options进行绑定，那么你应该绑定选项与state并返回state.name在displayFn而这样一来，你就不必绑定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.idstate.name并且需要这样的结合this找到。

demo plunker。