web-dev-qa-db-ja.com

Angular 2マテリアルのオートコンプリートで選択された値

オートコンプリート入力があります

_<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_が必要です。それ以外の場合、bindLocation($event.target.value)関数にパラメーターとして_option.magicKey_を追加する方法は？

angularautocompleteangular-materialselectedvalue
4
Serhio g. Lazin

'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;
};
8
Sagar

オートコンプリートフィールドで[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>
1
Mohit Saxena

<mat-option> has event onSelectionChange、このイベントを使用すると、任意の関数を呼び出して、オプションオブジェクトからすべてをバインドできます

(onSelectionChange)="bindLocation(option.text, option.magicKey)"
0
Serhio g. Lazin