如何将整个对象传递给md-autocomplete angular 4的输入

Question

通常我有一个对象-> filteredDrivers对象。

单个对象如下所示：

DRIVER_ID: 99 DRIVER_NAME: "JOHN SNOW"

我在md-autocomplete中使用的：

<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"类的整个驱动[value]="driver" ，则会看到[object Object]并且表单提交给了我完整的对象

但是当我使用[value]="driver.DRIVER_NAME"我可以看到我想要的东西[value]="driver.DRIVER_NAME" JOHN SNOW但是表单提交只给了我driver.DRIVER_NAME

如何通过提交表单并在输入中仅查看driver.DRIVER_NAME属性来传递整个对象？

Answer 1

Angular Material文档中有关于Autocomplete的明确记录。

特别：

设置单独的控制和显示值

如果希望选项的控制值（保存在表单中的值）与选项的显示值（在实际文本字段中显示的值）不同，则需要在自动完成元素上设置displayWith属性。 常见的用例是，您想将数据另存为一个对象，但仅显示选项的字符串属性之一。

为此，请在您的组件类上创建一个将控制值映射到所需显示值的函数。 然后将其绑定到自动完成的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>