angular - Angular 2 Material 自动完成选择值

我有自动完成输入

<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)函数中？

最佳答案

使用“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;
};