web-dev-qa-db-fra.com

Angular Autocompléte est la valeur de retour en tant que [objet d'objet]

Mon exigence était de montrer la valeur sélectionnée dans la zone d'entrée et d'obtenir l'ID sélectionné et la valeur au fichier .TS. Comme j'ai besoin de l'ID et de la valeur, je lie la valeur d'option directement à [valeur]. Mais si je fais cela, il est imprimé comme [objet d'objet].

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

Fichier TS

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

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

URL de la rédaction de Stackblitz: https://stackblitz.com/edit/angular-mat-select-data-n4tvmj

angularangular-material-6
12
Gvs Akhil

Vous voulez utiliser le displayWith attribut. Par manuel:

Si vous souhaitez que la valeur de contrôle de l'option (ce qui est enregistré dans le formulaire) soit différente de la valeur d'affichage de l'option (ce qui est affiché dans le champ de texte), vous devez définir la propriété displayWith sur votre auto-expert élément. Un cas d'utilisation commun pour cela pourrait être si vous souhaitez enregistrer vos données comme objet, mais affichez une seule des propriétés de chaîne de l'option.

Pour faire ce travail, créez une fonction sur votre classe de composants qui mappe la valeur de contrôle à la valeur d'affichage souhaitée. Ensuite, liez-le à la propriété displayWith de l'autocomplete.

Côté du gabarit

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

Côté script

getOptionText(option) {
  return option.name;
}

démo: https://stackblitz.com/edit/angular-mat-select-data-cddqia

7
Jeto