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, но при выборе вход отображает value, а не name.

Зная, что мне нужно значение для другой обработки, и я не буду менять [value] в mat-automplete.

Как мне взять ссылку на имя для ввода ??

Предложения ??

Answer 1

Вы можете использовать атрибут displayWith автозаполнения Mat и передать функцию, которая возвратит желаемую отформатированную строку.

В вашем примере:

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

Поскольку вы не хотите изменять [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;
}

Answer 3

Вы можете использовать FormControl для тега input и изменять значение этого form-control, используя метод patchValue.

Используйте (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 с другими данными

Answer 4

В вашей модели 'shopData' добавьте символ ':' после 'value' или:

export interface Shop {
  name: string;
  value: number;
}

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