如何在自動完成材料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。