Angular mat-autocomplete：如何显示选项名称而不是输入中的值答案

【问题标题】：Angular mat-autocomplete : How to display the option name and not the value in the inputAngular mat-autocomplete：如何显示选项名称而不是输入中的值
【发布时间】：2019-08-16 17:40:03
【问题描述】：

我在我的 Angular 应用下使用 mat-autocomplete 小部件：

    <mat-form-field class="col-md-3" color="warn">
                <input type="text"
                       id="libelleShop"
                       #inputSelectShop
                       placeholder="Selectionner la boutique"
                       matInput
                       formControlName="libelleShop"
                       ngDefaultControl
                       [matAutocomplete]="auto">
                <mat-autocomplete #auto="matAutocomplete"" 
               (optionSelected)="onShopSelectionChanged($event)">
                  <mat-option *ngFor="let shop of shopData" [value]="shop.value">
                    {{shop.name}}
                  </mat-option>
                </mat-autocomplete>
   </mat-form-field>

我的店铺数据是这样的：

shopData = [
    {name: 'AAA' , value :'11'},
    {name: 'BBB', value :'22'},
    {name: 'CCC', value : '33'}
  ];

如此 - 选项显示在name，但选择输入显示的输入显示value而不是name。

知道我需要其他治疗的价值，我不会更改mat-automplete 中的[value]。

我如何将名称引用到输入中？？

建议？？

【问题讨论】：

标签： angular angular-material angular-material2 angular-material-6

【解决方案1】：

您可以使用 Mat 自动完成的 displayWith 属性并传入一个函数，该函数将返回所需的格式化字符串。

在你的例子中：

displayFn(shop: Shop): string {
  return shop.name;
}

<mat-autocomplete #auto="matAutocomplete"" (optionSelected)="onShopSelectionChanged($event)" [displayWith]="displayFn">
    <mat-option *ngFor="let shop of shopData" [value]="shop">
      {{shop.name}}
    </mat-option>
  </mat-autocomplete>

【讨论】：

这不起作用，因为 OP 不想更改 [value]="shop.value"。此外，displayWith 是 mat-autocomplete 的一个功能，而不是 mat-option。
确实是我的错误，在答案中但不是在代码中说...无论如何，在这种情况下查找是正确的解决方案:)
这对我有用，只能修复 => [value]="shop"
由于某种原因，当我选择一个名称时名称没有显示出来，但在控制台中它打印了 value 属性，我使用了这种方法。有人可以帮忙吗！
你传递的是 [value]="shop" 而不是 [value]="shop.value" 吗？

【解决方案2】：

使用选项 id 的简单方法可能有用：

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onShopSelectionChanged($event)">
  <mat-option *ngFor="let shop of shopData" [value]="shop.name" [id]="shop.value">
    {{shop.name}}
  </mat-option>
</mat-autocomplete>

并在函数中读取值和名称：

onShopSelectionChanged(event) {
    const selectedValue = event.option.id;
    console.log(selectedValue);
    const selectedName = event.option.value;
    console.log(selectedName);
}

【讨论】：

【解决方案3】：

因为您不想更改[value]="shop.value"，所以您唯一的办法是根据与displayWith 功能一起使用的函数中的值来查找名称：

<mat-autocomplete ... [displayWith]="getShopName" ... >


getShopName(value) {
    const results = this.shopData.filter(shop => shop.value === value);
    if (results.length) {
        return results[0].name;
    }
    return value;
}

【讨论】：

这可以正常工作，除非名称重复但 ID 是唯一的

【解决方案4】：

您可以在input 标签上使用FormControl，并且可以使用patchValue 方法更改此form-control 的值。

使用(onSelectionChange)="onEnter($event)" 并使用选定值找到 selectedArray 选项，然后从该选定选项对象中使用任何选项键更新输入值。

HTML：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #stateInput (keyup)="0" matInput placeholder="State" 
     aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option (onSelectionChange)="stateInput.value !=undefined && 
      onEnter($event)" *ngFor="let state of filteredStates | async"
      [value]="state.name">
        <img style="vertical-align:middle;" aria-hidden 
         src="{{state.flag}}" height="25" />
        <span>{{ state.name }}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

Ts 文件：

 onEnter(evt: any){
    const selectedState =  this.states.find(state =>
      state.name.toLowerCase()==evt.source.value.toLowerCase());
    if (evt.source.selected) {
      console.log(selectedState);
      if(selectedState) {
      setTimeout(()=>{
        this.stateCtrl.patchValue(selectedState.population);
      }, 0);
      }
    }
  }

Stackblitz Demo with other data

【讨论】：