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

Моим требованием было показать выбранное значение в поле ввода и получить выбранный идентификатор и значение в файл .ts. Поскольку мне нужны Id и Value, я привязываю значение параметра напрямую к [value]. Но если я это сделаю, он будет напечатан как [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);
   }

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


angular angular-material-6
person Gvs Akhil    schedule 11.03.2019    source источник

Ответы (1)


arrow_upward
28
arrow_downward

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

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

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

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

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

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

getOptionText(option) {
  return option.name;
}

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

person Jeto    schedule 11.03.2019
comment
Он работает, как ожидалось, но я получаю эту ошибку. ОШИБКА Ошибка: не перехвачено (в обещании): TypeError: невозможно прочитать свойство name с нулевым значением TypeError: невозможно прочитать свойство name с нулевым значением в MatAutocomplete.push ../ src / app / pages / hotels / homepage / homepage.component. ts. 925) на autocomplete.es5.js: 628 - person Gvs Akhil; 11.03.2019
comment
@GvsAkhil Должен быть случай, когда ваш параметр равен нулю, вы можете проверить значение в getOptionText чем-то вроде return option ? option.name : null; (при необходимости замените null на что-нибудь более подходящее). - person Jeto; 11.03.2019
comment
Я. Большое спасибо за работу, но есть сомнения, что мы не передаем какой-либо параметр в [displayWith] = getOptionText, а возвращаем правильное имя. Как это возможно? - person Gvs Akhil; 11.03.2019
comment
@GvsAkhil Это просто ссылка на функцию, Angular автоматически передаст все, что вы установили как [value] в качестве аргумента. - person Jeto; 11.03.2019
comment
Окк, спасибо большое, я борюсь с этим за последний час - person Gvs Akhil; 11.03.2019
comment
Что, если это работает на одной странице и все равно показывает [Object Object] на другой? Вариант выбран правильно, [displayWith]="myFunc" где myFunc() вообще не вызывается. - person Evgeny Nozdrev; 07.12.2019
comment
Функция получает много вызовов даже при использовании стратегии обнаружения изменений Angular OnPush. - person Russ; 12.05.2020