¿Cómo puedo tener múltiples autocompletar chip en la misma página utilizando material angular 7.1.1?

votos
0

Estoy usando angular 6 con el material angular 7.1.1 y estoy tratando de usar chip con auto completo. Pero el problema es que cuando selecciono una de las opciones, que consigue aplicar a todas las fichas con autocompletar.

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

¿Cómo consigo que se aplique sólo al campo de entrada en particular?

Publicado el 19/12/2018 a las 14:16
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
0

Creo que sólo hay que cambiar el id de la lista de viruta colchoneta.

Así que en su primera establece el ID

<mat-chip-list #chipList>

y en el segundo se establece el ID

<mat-chip-list #chipList2>

A continuación, se establece

[matChipInputFor]="chipList"

y [matChipInputFor]="chipList2"

Ahora debería funcionar bien.

Respondida el 28/06/2019 a las 14:14
fuente por usuario

votos
0

Usted tiene que utilizar una lista diferente para cada lista de Chip y también dos atributos diferentes para [matAutocomplete]

Código 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 Ejemplo de Trabajo StackBlitz

Respondida el 20/12/2018 a las 06:16
fuente por usuario

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