Angular mat-autocomplete:如何显示选项名称而不是输入中的值 [英] Angular mat-autocomplete : How to display the option name and not the value in the input

问题描述

我在我的 Angular 应用程序下使用 mat-autocomplete 小部件:

I'm using the mat-autocomplete widget under my Angular app :

    <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>

我的店铺数据是这样的:

my Shop data is like this :

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

如此 - 选项由 name 显示，但在选择 value 不是 name .

Like this - options are displayed by name , but when selection the input displaysit by the value not the name.

知道我需要其他处理的值，我不会更改mat-automplete中的[value].

Knowing that i need the value for other treatment and i won't change the [value] in the mat-automplete.

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

How may i take reference for the name to the input ??

建议??

推荐答案

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

You can use the displayWith attribute of Mat autocomplete and pass in a function that will return the desired formatted string.

在您的示例中:

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>

这篇关于Angular mat-autocomplete:如何显示选项名称而不是输入中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！