web-dev-qa-db-fra.com

Angular MAT-Autocomplete: Comment afficher le nom d'option et non la valeur dans l'entrée

J'utilise le mat-autocomplete widget sous My Angular App:

    <mat-form-field class="col-md-3" color="warn">
                <input type="text"
                       id="libelleShop"
                       #inputSelectShop
                       placeholder="Selectionner la boutique"
                       matInput
                       formControlName="libelleShop"
                       ngDefaultControl
                       [matAutocomplete]="auto">
                <mat-autocomplete #auto="matAutocomplete"" 
               (optionSelected)="onShopSelectionChanged($event)">
                  <mat-option *ngFor="let shop of shopData" [value]="shop.value">
                    {{shop.name}}
                  </mat-option>
                </mat-autocomplete>
   </mat-form-field>

mes données de magasin sont comme ceci:

shopData = [
    {name: 'AAA' , value :'11'},
    {name: 'BBB', value :'22'},
    {name: 'CCC', value : '33'}
  ];

Comme cela - les options sont affichées par name, mais lorsque vous sélectionnez l'entrée Affichage par le value non le name.

Sachant que j'ai besoin de la valeur pour un autre traitement et je ne changerai pas le [value] dans le mat-automplete.

Comment puis-je faire référence pour le nom à l'entrée ??

Suggestions ??

angularangular-materialangular-material2angular-material-6
6
firasKoubaa

Vous pouvez utiliser l'attribut DisplayBith of Mat Autocomplete et transmettre une fonction qui retournera la chaîne formatée souhaitée.

Dans votre exemple:

displayFn(shop: Shop): string {
  return shop.name;
}
<mat-autocomplete #auto="matAutocomplete"" (optionSelected)="onShopSelectionChanged($event)" [displayWith]="displayFn">
    <mat-option *ngFor="let shop of shopData" [value]="shop.value">
      {{shop.name}}
    </mat-option>
  </mat-autocomplete>
5
Alex

Manière simple en utilisant l'option ID mayby ​​utile:

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onShopSelectionChanged($event)">
  <mat-option *ngFor="let shop of shopData" [value]="shop.name" [id]="shop.value">
    {{shop.name}}
  </mat-option>
</mat-autocomplete>

et lire la valeur et le nom dans la fonction:

onShopSelectionChanged(event) {
    const selectedValue = event.option.id;
    console.log(selectedValue);
    const selectedName = event.option.value;
    console.log(selectedName);
}
2
AppLend

Parce que vous ne voulez pas changer [value]="shop.value", votre seul recours est de rechercher le nom basé sur la valeur dans une fonction utilisée avec la fonctionnalité displayWith:

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


getShopName(value) {
    const results = this.shopData.filter(shop => shop.value === value);
    if (results.length) {
        return results[0].name;
    }
    return value;
}
1
G. Tranter

Dans votre modèle 'ShopData' Ajoutez le caractère ":" caractère après "valeur" ou:

export interface Shop {
  name: string;
  value: number;
}

shopData: Shop[] = [
  {name: 'AAA' , value: 11},
  {name: 'BBB', value: 22},
  {name: 'CCC', value: 33}
];
0
Pablo M.

Vous pouvez utiliser FormControl sur input étiquette et peut modifier la valeur de cette form-control Utiliser patchValue méthode.

Utilisation (onSelectionChange)="onEnter($event)" et trouver l'option sélectionnée en utilisant la valeur sélectionnée et à partir de cet objet d'option sélectionné met à jour la valeur de l'entrée avec l'une des touches d'options.

[.____] HTML:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input #stateInput (keyup)="0" matInput placeholder="State" 
     aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option (onSelectionChange)="stateInput.value !=undefined && 
      onEnter($event)" *ngFor="let state of filteredStates | async"
      [value]="state.name">
        <img style="vertical-align:middle;" aria-hidden 
         src="{{state.flag}}" height="25" />
        <span>{{ state.name }}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

File TS:

 onEnter(evt: any){
    const selectedState =  this.states.find(state =>
      state.name.toLowerCase()==evt.source.value.toLowerCase());
    if (evt.source.selected) {
      console.log(selectedState);
      if(selectedState) {
      setTimeout(()=>{
        this.stateCtrl.patchValue(selectedState.population);
      }, 0);
      }
    }
  }

Stackblitz Demo avec d'autres données

0
Abhishek Kumar