Jak mogę mieć wiele wiórów autouzupełniania na tej samej stronie, używając kątowa materiału 7.1.1?

głosy
0

Używam kątowych 6 z Kątowymi materiału 7.1.1 i próbuję użyć chipa z auto kompletne. Ale problemem jest to, że kiedy wybrać jedną z opcji, że zostanie zastosowany do wszystkich żetonów z autouzupełniania.

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

Jak mogę dostać to stosuje się tylko do pola wprowadzania konkretnego?

Utwórz 19/12/2018 o 14:16
źródło użytkownik
W innych językach...                            


2 odpowiedzi

głosy
0

Myślę, że po prostu trzeba zmienić id mat-chip-listy.

Tak na pierwszy ustawić identyfikator

<mat-chip-list #chipList>

i na sekundę można ustawić identyfikator

<mat-chip-list #chipList2>

Następnie należy ustawić

[matChipInputFor]="chipList"

i [matChipInputFor]="chipList2"

Teraz powinno działać dobrze.

Odpowiedział 28/06/2019 o 14:14
źródło użytkownik

głosy
0

Musisz użyć inną listę dla każdej listy Chip a także dwa różne atrybut [matAutocomplete]

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

Grupę roboczą StackBlitz Przykład

Odpowiedział 20/12/2018 o 06:16
źródło użytkownik

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