Como faço para ter vários autocomplete chip na mesma página usando o material angular 7.1.1?

votos
0

Estou usando Angular 6 com material angular 7.1.1 E eu estou tentando usar chip com auto completa. Mas o problema é que quando eu selecionar uma das opções, que será aplicado a todas as fichas com preenchimento automático.

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

Como faço para obtê-lo para aplicar apenas para o campo de entrada particular?

Publicado 19/12/2018 em 14:16
fonte usuário
Em outras línguas...                            


2 respostas

votos
0

Eu acho que você só tem que mudar o id do-chip-lista mat.

Assim, em seu primeiro definir o id

<mat-chip-list #chipList>

e em seu segundo você definir o id

<mat-chip-list #chipList2>

Então você definir

[matChipInputFor]="chipList"

e [matChipInputFor]="chipList2"

Agora ele deve funcionar bem.

Respondeu 28/06/2019 em 14:14
fonte usuário

votos
0

Você tem que usar uma lista diferente para cada lista Chip e também dois atributo diferente 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>

Um Exemplo de Trabalho StackBlitz

Respondeu 20/12/2018 em 06:16
fonte usuário

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