web-dev-qa-db-fra.com

Comment puis-je obtenir la valeur de l'élément sélectionné dans Angular 2 matériaux à remplissage automatique

J'ai créé un champ à saisie semi-automatique avec le matériel Angular et obtenir avec succès la liste des pays auprès de Web.

CountryID -> valeur de l'élément (ou index)

Pays -> texte de l'article

Lorsque j'essaie d'obtenir la valeur de l'élément sélectionné (pas le texte), le texte est renvoyé comme prévu. Mais je dois obtenir la valeur de l'élément sélectionné.

Ceci est mon code:

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

et

<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>

Edit: Après avoir changé cette ligne

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

pour ça,

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

cela a bien fonctionné, this.WeatherSearchForm.get('country').value; a renvoyé le CountryID.

Mais du côté de l'interface utilisateur, après avoir sélectionné un pays dans le champ de saisie semi-automatique, je vois maintenant le CountryID et non le pays.

 enter image description here  enter image description here

angularautocompleteangular-material2
6
sa_

Vous devez utiliser [displayWith]="displayFn" dans la balise <md-autocomplete>. En outre, vous avez passé l'objet entier en tant que 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>

Dans votre composition, ajoutez:

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

Vous pouvez en savoir plus à ce sujet en consultant la section Définition de valeurs distinctes pour le contrôle et l’affichage dans docs

démo

5
Nehal

Voici la version de travail finale, espérons que cela aidera tout le monde:

<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);
...
1
sa_