각도 2 mdAutocomplete 2 웨이 데이터 바인딩

Question

사용자 정의 오브젝트 데이터로 Angular 2 MdAutocomplete를 작성하려고하는데 오브젝트 데이터를 가져오고 설정하는 데 문제가 있습니다. 그것은 필터링 및 표시하지만 바인딩 데이터가 아닌 것처럼 보이지만 편집 양식에 항목을 설정하지 않고 양식을 저장하는 동안 항목을 가져 오지 않습니다.

**HTML:** 
*<md-input-container> 
    <input type="text" required placeholder="Store" mdInput [formControl]="storeControl" [mdAutocomplete]="auto" [value]="card.store.name"> 
    <md-hint *ngIf="card.store == null || card.store.id == 0" [ngStyle]="{'color': 'red'}"> Store is required </md-hint> 
</md-input-container> 
<md-autocomplete #auto="mdAutocomplete" name="store" [(ngModel)]="card.store" [displayWith]="displayFn" ngDefaultControl> 
    <md-option *ngFor="let store of filteredStores | async" [value]="store"> 
    {{ store?.name }} 
    </md-option> 
</md-autocomplete>* 

**TS** 

    *private stores: Store[]; 
    filteredStores: Observable<Store[]>; 
    private card:Card = <Card> { 
    store: new Store(0,'',''), 
    }; 
    storeControl = new FormControl(); 
    ngOnInit() { 
    this.storeService.getStores().subscribe(result => { 
     this.stores = result.items; 
    }); 
    this.filteredStores = this.storeControl.valueChanges 
     .startWith(null) 
     .map(name => name ? this.filter(name) : this.stores); 
    } 
    filter(name: string): Store[] { 
    return this.stores.filter(store => new RegExp(name, 'gi').test(store.name)); 
    } 
    displayFn(store: Store): string { 
    if (store != null) { 
     this.card.store = store; 
    } 
    return store ? store.name : ''; 
    }* 

Object Item: Store(id, name, description) 

Answer 1

options: store[] = []; 

가 [formControl] 지시어는 ReactiveForms의 일부입니다 내 understading에 생성자

constructor(private storeService: StoreService) { 
    this.filteredOptions = this.myControl.valueChanges 
     .startWith(null) 
     .map(store=> store&& typeof store=== 'object' ? store.name: store) 
     .map(name=> name? this.filter(name) : this.options.slice()); 
} 

Answer 2

에 filterOptions 아래에 제공하고 ngModel 그것을 할 각도 방법 : 여기 내 템플릿 코드는 모든 프레임 워크. 그래서 자동 완성 입력을위한 두 가지 방식의 각진 작업을 믹스하고 있으므로 수동으로 수동으로해야합니다.

this.storeControl.valueChanges.subscribe(value => {this.store.card.name = value}) 

가 결합

그것이

희망이 도움하려면 :

는 그래서 뭔가 같은 것