Angular 2材质自动完成选定值

发布时间：2020-12-17 17:03:49 所属栏目：安全来源：网络整理

导读：我有自动完成输入 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" formControlNa

我有自动完成输入

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”：[{ “文”： “Euronet上”,“magicKey”： “dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ ==”,“isCollection”：真正},{ “文”： “Euronet上”,“magicKey”： “dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ ==” “isCollection”：真正}]

当我尝试添加值[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;
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!