Как я могу получить значение выбранного элемента в автозаполнении материала Angular 2

Я создал поле автозаполнения с помощью Angular Material и успешно получил список стран из веб-API.

CountryID -> значение элемента (или индекс)

Страна -> текст позиции

Когда я пытаюсь получить значение выбранного элемента (не текст), он возвращает текст, как ожидалось. Но мне нужно получить стоимость выбранного предмета.

Это мой код:

this.WeatherSearchForm.get('country').value; // this returns the selected country name, ex: France

а также

<md-input-container>
  <input mdInput placeholder="Select Country..." [mdAutocomplete]="auto" class="form-control validate filter-input" formControlName="country">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" required md-input-minlength="2" md-input-maxlength="18"
  md-select-on-match required md-input-minlength="2">
  <md-option *ngFor="let country of countries | async" [value]="country.Country">
    {{ country.Country }}
  </md-option>
</md-autocomplete>

Изменить: после того, как я изменил эту строку

<md-option *ngFor="let country of countries | async" [value]="country.Country">

к этому,

<md-option *ngFor="let country of countries | async" [value]="country.CountryID">

он работал нормально, this.WeatherSearchForm.get('country').value; вернул CountryID.

Но на стороне пользовательского интерфейса после выбора страны в поле автозаполнения теперь я вижу CountryID, а не Country.

введите здесь описание изображения введите описание изображения здесь


angular autocomplete angular-material2
person sa_    schedule 10.07.2017    source источник
comment
Пожалуйста, добавьте код элемента пользовательского интерфейса, показывающий идентификатор (тот, который справа с 6).   -  person BogdanC    schedule 10.07.2017
comment
На самом деле это код, показывающий 6, ‹md-option * ngFor = let страна стран | async [значение] = country.CountryID ›   -  person sa_    schedule 10.07.2017

Ответы (2)


arrow_upward
9
arrow_downward

Вам нужно использовать [displayWith]="displayFn" внутри тега <md-autocomplete>. Кроме того, вы можете передать весь объект как value.

<md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" required md-input-minlength="2" md-input-maxlength="18"
  md-select-on-match required md-input-minlength="2" [displayWith]="displayFn">
  <md-option *ngFor="let country of countries | async" [value]="country">
    {{ country.Country }}
  </md-option>
</md-autocomplete>

В свой компонент добавьте:

displayFn(country): string {
      return country ? country.Country : country;
}

Вы можете узнать больше об этом в разделе Настройка отдельных элементов управления и отображаемых значений в документации.

демонстрация

person Nehal    schedule 10.07.2017
comment
спасибо, но это не работает. Насколько я понимаю, в функции displayFn страна не указана. Я также проверил документацию и считаю, что это может не сработать, потому что мы не отправляем какой-либо пользовательский объект в параметрах функции. - person sa_; 11.07.2017
comment
Вы проверили демо? Он должен работать, если вы передаете [значение] = страна. Вам не нужно передавать 'user', чтобы отображалась Fn, вместо этого он принимает объект 'country'. - person Nehal; 11.07.2017
comment
Проблема в том, что я не могу получить выбранное значение. если я установил CountryID следующим образом: [value] = country.CountryID, то this.WeatherSearchForm.get ('country'). value вернет Мальту, а не 6, а отображаемое значение - 6, а не Мальта. Если я установил это: [value] = country.Country, тогда отображаемое значение будет правильным, то есть Мальта. Но this.WeatherSearchForm.get ('country'). Value возвращает Мальту, а не 6. - person sa_; 11.07.2017
comment
Разобрался сейчас. Спасибо за вашу помощь. Я передал объект вместо значения. ‹Md-option * ngFor = let страна стран | async [значение] = страна ›и displayFn совпадают. displayFn (страна): строка {отладчик; страна возврата? country.Country: country.CountryID; } И когда я пытаюсь получить значение, которое я передал объекту Country, и получить CountryID следующим образом: this.SavetoDB (this.WeatherSearchForm.get ('country'). Value, .... SavetoDB (country: Country,. .... parseInt (country.CountryID) - person sa_; 11.07.2017
comment
Могу ли я вызвать другую функцию внутри displayFn? Он возвращает мне ошибку - person Serhio g. Lazin; 06.12.2017
comment
значение должно быть объектом, спасибо, вы меня спасли. - person Naresh Etikala; 01.03.2021

arrow_upward
1
arrow_downward

Вот окончательная рабочая версия, надеюсь, она кому-то поможет:

<md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" required md-input-minlength="2" md-input-maxlength="18"
  md-select-on-match required md-input-minlength="2" [displayWith]="displayFn">
  <md-option *ngFor="let country of countries | async" [value]="country">
    {{ country.Country }}
  </md-option>
</md-autocomplete>

selectedCountry:Countries;
displayFn(country: Countries): string {
  this.selectedCountry = country;
  console.log(this.selectedCountry);
  return country ? country.Country : country.CountryID;
}

this.SavetoDB(this.WeatherSearchForm.get('country').value);

SavetoDB(country:Countries)
{
   countryID = parseInt(country.CountryID);
...
person sa_    schedule 11.07.2017