角度2 mdAutocomplete 2ウェイデータバインディング

Question

私は、カスタムオブジェクトデータでアンギュラ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の一部であり、ngModelはそれを行うための角度の方法である私のunderstadingするためにコンストラクタにfilterOptionsの下

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

を提供すべてがフレームワーク内にあります。オートコンプリート入力のためのフォームと両方の角度の作業をミックスしているので、反応的な方法で手作業で行う必要があります。

だから、ようなものになるだろう：結合

はそれが

を役に立てば幸い作るために

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