Angular AutoComplete возвращает значение как [Object Object] - PullRequest
Новая
       11

Angular AutoComplete возвращает значение как [Object Object]

0 голосов
/ 11 марта 2019

Мое требование состояло в том, чтобы показать выбранное значение в поле ввода и получить выбранные идентификатор и значение в файл .ts. Так как мне нужны идентификатор и значение, я связываю значение параметра непосредственно с [значением]. Но если я сделаю это, он будет напечатан как [Object Object]. 

<mat-form-field appearance="outline" class="w-100">
            <mat-label>Enter Hotel Name</mat-label>
            <input type="text" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedclient($event)">
                <mat-option *ngFor="let option of clients; let i = index" [value]="option">
                    {{ option.name }}
                  </mat-option>
            </mat-autocomplete>
            <mat-icon matSuffix>location_on</mat-icon>
          </mat-form-field>

Файл Ts 

    options = [
        { id: 1, name: 'One'},
        { id: 2, name: 'Two'},
        { id: 3, name: 'Three'}
       ];

selectedclient(event) {
     console.log(event.option.value);
   }

Редактор Stackblitz URL: https://stackblitz.com/edit/angular-mat-select-data-n4tvmj

1 Ответ

2 голосов
/ 11 марта 2019

Вы хотите использовать атрибут displayWith.Согласно инструкции:

Если вы хотите, чтобы контрольное значение параметра (которое сохраняется в форме) отличалось от отображаемого значения параметра (что отображается в текстовом поле), вам потребуетсяустановить свойство displayWith для элемента автозаполнения.Обычный вариант использования этого может быть, если вы хотите сохранить свои данные как объект, но отобразить только одно из строковых свойств опции.

Чтобы это работало, создайте функцию в вашем классе компонентов, которая отображаетконтрольное значение до желаемого значения дисплея.Затем привяжите его к свойству displayWith автозаполнения.

Сторона шаблона 

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

Сторона сценария 

getOptionText(option) {
  return option.name;
}

Демонстрация: https://stackblitz.com/edit/angular-mat-select-data-cddqia

...