web-dev-qa-db-fra.com

Angular 2 matières sélectionnées automatiquement

J'ai une saisie semi-automatique

<

div formArrayName="addresses"> <div class="row" *ngFor="let itemrow of searchForm.controls.addresses.controls; let i=index" [formGroupName]="i">      <mat-form-field>
         <input type="text" class="form-control" id="address"
         formControlName="address" matInput [matAutocomplete]="auto"
        (keyup)="getESRI($event.target.value)"
        (focusout)="bindLocation($event.target.value)">
        <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of testLocation"
        [value]="option.text">
             {{ option.text }}</mat-option></mat-autocomplete></mat-form-field> </div></div>

"testlocation":[{"text":"Euronet","magicKey":"dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ==","isCollection":true},{"text":"Euronet","magicKey":"dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ==","isCollection":true}]

Lorsque j'essaie d'ajouter value [valeur] = "option.magicKey, cela s'affiche dans input option.magicKey lorsque je sélectionne une option. J'ai besoin d'option.magicKey uniquement en tant que valeur, et d'option.text en tant qu'option d'entrée. comme paramètre de bindLocation ($ event.target.value), fonction?

angularautocompleteangular-materialselectedvalue
3
Serhio g. Lazin

Utilisez 'displayWith'

MatAutoComplete comporte une entrée appelée displayWith. Dans ce cas, vous devez transmettre une fonction qui mappe la valeur de contrôle de votre option sur sa valeur d'affichage.

Voici un exemple:

<mat-form-field>

  <input
    matInput
    placeholder="Select a value"
    [formControl]="form.controls.enumField"
    [matAutocomplete]="autoComplete">

  <mat-autocomplete
    #autoComplete="matAutocomplete"
    [displayWith]="valueMapper">     <-- Using displayWith here

  <mat-option
    *ngFor="let enum of enumerationObservable | async"
    [value]="enum.key">
      {{ enum.value }}
  </mat-option>

</mat-autocomplete>

Voici la fonction qui renvoie la valeur en utilisant la clé reçue 

public valueMapper = (key) => {
  let selection = this.enumeration.find(e => e.key === key);
  if (selection)
    return selection.value;
};
6
Sagar

Utilisez [displayWith] attribut avec le champ de saisie automatique.

FICHIER HTML

<input
  type="text"
  placeholder="Address"
  mdInput
  formControlName="address" 
  [mdAutocomplete]="auto"
  (keyup)="onKeyUp()">
<md-autocomplete
  #auto="mdAutocomplete"
  [displayWith]="displayFn">
  <md-option *ngFor="let option of options"
    [value]="option">
    {{ option.text }}
  </md-option>
</md-autocomplete>
1
Mohit Saxena

<mat-option> a event onSelectionChange , avec cet événement, vous pouvez appeler n’importe quelle fonction et lier le tout à partir de l’option object

(onSelectionChange)="bindLocation(option.text, option.magicKey)"
0
Serhio g. Lazin