Wie muß ich die automatische Vervollständigung mehr Chips auf der gleichen Seite mit Angular Material 7.1.1?

stimmen
0

Ich bin mit Angular 6 mit kantigem Material 7.1.1 und ich versuche, mit Auto komplett zu verwenden Chip. Aber das Problem ist, dass, wenn ich wählen Sie eine der Option, die für alle Chips mit der automatischen Vervollständigung angewendet wird.

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

Wie bekomme ich es nur auf das jeweilige Eingabefeld zu bewerben?

Veröffentlicht am 19/12/2018 um 14:16
quelle vom benutzer
In anderen Sprachen...                            


2 antworten

stimmen
0

Ich denke, dass Sie nur die ID der Matte-Chip-Liste zu ändern.

Also auf Ihrem ersten legen Sie die ID

<mat-chip-list #chipList>

und auf dem zweiten legen Sie die ID

<mat-chip-list #chipList2>

Dann setzen Sie

[matChipInputFor]="chipList"

und [matChipInputFor]="chipList2"

Jetzt sollte es gut funktionieren.

Beantwortet am 28/06/2019 um 14:14
quelle vom benutzer

stimmen
0

Sie haben eine andere Liste für jede Chip-Liste zu verwenden, und auch zwei verschiedene Attribute für [matAutocomplete]

HTML Quelltext:

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

Ein Arbeits StackBlitz Beispiel

Beantwortet am 20/12/2018 um 06:16
quelle vom benutzer

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