アンギュラマテリアル2複雑なオブジェクトリストによるオートコンプリートバインディングは、正常に動作しません。

Question

複雑なオブジェクトによるオートコンプリートバインディングは、正常に動作しません。オートコンプリートを複雑なオブジェクトリストにバインドし、選択した複雑なオブジェクトを別のオブジェクトに割り当てる必要がありますが、私がそれを行っているときに[オブジェクトオブジェクト]がオートコンプリートに表示されています。私はまた、問題を説明するためのプランナーを作成しました

現在、それは文字列の配列リストでのみ動作します。プレーンストリングリストを持つバインディングリストの代わりに、複雑なオブジェクトのリストをバインドします。

私はdocumentationで説明したようにそれは作業を行い角度素材v2.0.0デベロッパー - beta.3に Plunker Link

Answer 1

を使用しています。キーは、displayWithと(onSelect)を使用して以下のようにオブジェクトの選択を処理することです。

HTML：

<md-input-container> 
    <input type="text" mdInput [formControl]="searchControl" [mdAutocomplete]="usersComp"/> 
</md-input-container> 

<md-autocomplete #usersComp="mdAutocomplete" [displayWith]="getDisplayFn()"> 
    <md-option *ngFor="let user of filteredOptions | async" [value]="user" (onSelect)="selected(user)"> 
    {{user.displayName}} 
    </md-option> 
</md-autocomplete> 

コンポーネント：あなたは、できるだけ簡潔あなたの質問をする必要があるのStackOverflowで

export class UserSelectComponent implements OnInit { 
    @Input() value: any; 
    @Output() valueChange = new EventEmitter(); 

    searchControl: FormControl = new FormControl(); 
    filteredOptions: BehaviorSubject<any[]> = new BehaviorSubject(undefined); 

    constructor(private api: ApiService) { 
    this.searchControl.valueChanges.subscribe(data => { 
     if (typeof data === 'string' && data.trim() !== '') { 
     this.filter(data); 
     } 
    }); 
    } 

    ngOnInit() { 
    this.searchControl.setValue(this.value ? this.value : ''); 
    } 

    private filter(search: string) { 
    this.api.get(`search/user/${search}`).subscribe(data => this.filteredOptions.next(data)); 
    } 

    private getDisplayFn() { 
    return (val) => this.display(val); 
    } 

    private display(user): string { 
    //access component "this" here 
    return user ? user.displayName : user; 
    } 

    private selected(user) { 
    this.value = user; 
    //send to parent or do whatever you want to do 
    this.valueChange.emit(user); 
    } 
}