Comment dois-je puce plusieurs autocomplete sur la même page en utilisant un matériau angulaire 7.1.1?

voix
0

J'utilise angulaire 6 avec du matériel angulaire et je 7.1.1 essaie d'utiliser la puce avec auto complète. Mais le problème est que lorsque je sélectionne l'une des options, qui obtient appliquée à tous les jetons avec saisie semi-automatique.

`<mat-form-field class=example-chip-list>
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor=let fruit of fruits
      [selectable]=selectable
      [removable]=removable
      (removed)=remove(fruit)>
      {{fruit}}
      <mat-icon matChipRemove *ngIf=removable>cancel</mat-icon>
    </mat-chip>
    <input
      placeholder=New fruit...
      #fruitInput
      [formControl]=fruitCtrl
      [matAutocomplete]=auto1
      [matChipInputFor]=chipList
      [matChipInputSeparatorKeyCodes]=separatorKeysCodes
      [matChipInputAddOnBlur]=addOnBlur
      (matChipInputTokenEnd)=add($event)>
  </mat-chip-list>
  <mat-autocomplete #auto=matAutocomplete (optionSelected)=selected($event)>
    <mat-option *ngFor=let fruit of filteredFruits | async [value]=fruit>
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>`

Comment puis-je obtenir pour appliquer uniquement au champ d'entrée particulier?

Créé 19/12/2018 à 14:16
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
0

Je pense que vous avez juste besoin de changer l'ID de la liste des tapis-puce.

Donc, votre première vous définissez l'ID

<mat-chip-list #chipList>

et sur votre seconde vous définissez l'ID

<mat-chip-list #chipList2>

Ensuite, vous définissez

[matChipInputFor]="chipList"

et [matChipInputFor]="chipList2"

Maintenant, il devrait fonctionner correctement.

Créé 28/06/2019 à 14:14
source utilisateur

voix
0

Vous devez utiliser une autre liste pour chaque liste à puce et également deux attributs différents pour [matAutocomplete]

Code HTML:

<mat-form-field class="example-chip-list">
    <mat-chip-list #chipList>
        <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit)">
            {{fruit}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
        </mat-chip>
        <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

<h2>Second Chips List</h2>

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let fruit of fruits1"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove1(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput1
      [formControl]="fruitCtrl1"
      [matAutocomplete]="auto1"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add1($event)">
  </mat-chip-list>
  <mat-autocomplete #auto1="matAutocomplete" (optionSelected)="selected1($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Un travail StackBlitz Exemple

Créé 20/12/2018 à 06:16
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more