【问题标题】：Angular 2 material autocomplete selected valueAngular 2材料自动完成选择值
【发布时间】：2017-12-06 09:08:29
【问题描述】：

我有自动完成输入

<div formArrayName="addresses"> 
  <div class="row" 
       *ngFor="let itemrow of searchForm.controls.addresses.controls; let i=index" 
       [formGroupName]="i">
    <mat-form-field>
      <input type="text" 
             class="form-control" id="address"
             formControlName="address" 
             matInput 
             [matAutocomplete]="auto"
             (keyup)="getESRI($event.target.value)"
             (focusout)="bindLocation($event.target.value)">
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of testLocation"
                    [value]="option.text">
           {{ option.text }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field> 
  </div>
</div>

"testlocation":[{"text":"Euronet","magicKey":"dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ==","isCollection":true},{"text":"Euronet","magicKey":"dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ==","isCollection":true}]

当我尝试添加值 [value]="option.magicKey 时，它会在我选择选项时显示在输入 option.magicKey 中。我只需要option.magicKey 作为值，option.text 作为输入选项。否则如何将option.magicKey作为参数添加到bindLocation($event.target.value)函数中？

【问题讨论】：

标签： angular autocomplete angular-material selectedvalue

【解决方案1】：

使用'displayWith'

MatAutoComplete 具有一个名为 displayWith 的输入。其中，您需要传递一个函数，将您的选项的控件值映射到其显示值。

这是一个例子：

<mat-form-field>

  <input
    matInput
    placeholder="Select a value"
    [formControl]="form.controls.enumField"
    [matAutocomplete]="autoComplete">

  <mat-autocomplete
    #autoComplete="matAutocomplete"
    [displayWith]="valueMapper">     <-- Using displayWith here

  <mat-option
    *ngFor="let enum of enumerationObservable | async"
    [value]="enum.key">
      {{ enum.value }}
  </mat-option>

</mat-autocomplete>

这是使用接收到的键返回值的函数

public valueMapper = (key) => {
  let selection = this.enumeration.find(e => e.key === key);
  if (selection)
    return selection.value;
};

【讨论】：

【解决方案2】：

使用带有自动完成字段的 [displayWith] 属性。

HTML 文件

<input
  type="text"
  placeholder="Address"
  mdInput
  formControlName="address" 
  [mdAutocomplete]="auto"
  (keyup)="onKeyUp()">
<md-autocomplete
  #auto="mdAutocomplete"
  [displayWith]="displayFn">
  <md-option *ngFor="let option of options"
    [value]="option">
    {{ option.text }}
  </md-option>
</md-autocomplete>

【讨论】：

但是如何获取 option.magicKey 的值呢？我可以在 displayFn(option) 函数中使用 option.magicKey 参数调用另一个函数吗？或者我如何将 option.magicKey 值传递给 (focusout) 事件？
将选项传递到您要传递的位置，然后从中获取magicKey。很简单。
问题是formArray里面的地址
感谢您的帮助，我找到了解决方案
如何使用 keydown 选项值更新搜索词？不是在选择时。

【解决方案3】：

<mat-option> 有事件 onSelectionChange，通过这个事件你可以调用任何函数并绑定选项对象中的所有内容

(onSelectionChange)="bindLocation(option.text, option.magicKey)"

【讨论】：