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

Question

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

    <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，但在选择由输入displaysitvalue不是name。

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

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

建议？？

Answer 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.value">
      {{shop.name}}
    </mat-option>
  </mat-autocomplete>

Answer 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);
}