オブジェクト全体をmd-autocomplete angle 4から渡す方法

Question

一般的にオブジェクトのオブジェクトがあります - >filteredDriversです。

シングルオブジェクトは次のようになります。私は、MD-オートコンプリートで使用してい

DRIVER_ID: 99 DRIVER_NAME: "JOHN SNOW"

：

<md-input-container> 
    <input type="text" 
     name="driver" 
     mdInput 
     [mdAutocomplete]="auto" 
     placeholder="Driver" 
     ngModel 
     > 
</md-input-container> 

<md-autocomplete #auto="mdAutocomplete"> 
    <md-option *ngFor="let driver of filteredDrivers| async" [value]="driver" 
      ngDefaultControl> 
    {{ driver.DRIVER_NAME}} 
    </md-option> 
</md-autocomplete> 

と私はフォームを送信ではなく入力で、オブジェクト全体を渡したいです私はdriver.DRIVER_NAMEだけを見たいと思う。

私は入力に[value]="driver"のように全体のドライバを渡すと私は見[object Object] とフォーム送信は私に完全なオブジェクト

を与えますが、私は[value]="driver.DRIVER_NAME"に行くとき、私は私が望むものを見ることができます - JOHN SNOWが、フォームを提出してくれのみdriver.DRIVER_NAME

を与えます

フォームを送信してオブジェクト全体を渡すには、入力にdriver.DRIVER_NAMEプロパティしか表示されません。

Answer 1

AutocompleteのAngular Materialドキュメントにはっきりと記載されています。

具体的に：あなたは にオプションの制御値は（形式で保存されているもの）オプションの表示値と異なることがしたい場合

別々の制御および表示値

を設定する（何が表示されます実際のテキストフィールドの ）には、 のdisplayWithプロパティをオートコンプリート要素に設定する必要があります。 データをオブジェクトとして保存したいが、 オプションの文字列プロパティのうちの1つだけを表示したい場合は、このケースをよく使用します。

この作業を行うには、コントロール値を希望の表示値にマップするコンポーネントクラスに関数を作成します。次に、それを オートコンプリートのdisplayWithプロパティにバインドします。

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

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn"> 
    <md-option *ngFor="let option of filteredOptions | async" [value]="option"> 
     {{ option.name }} 
    </md-option> 
</md-autocomplete>