使用 ngFor 的材料芯片输入 - 模板参考循环

Question

I'm trying to loop and create Material chip inputs dynamically, eg:

<section *ngFor="let basket of baskets">

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let fruit of basket.fruits" [selectable]="selectable"
             [removable]="removable" (removed)="remove(basket, fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input placeholder="New fruit..."
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add(basket, $event)">
  </mat-chip-list>
</mat-form-field>

</section>

It's not really going to work since there is a template reference ( #chipList ) which is used here: [matChipInputFor]="chipList" and I want each chip input to remove/add its own items. Since template reference is unique, it won't work inside an *ngFor .

I've tried to use @ViewChildren :

@ViewChildren(MatChipList) chipLists: QueryList<MatChipList>;

but I'm unable to filter by class, and when I do use { read: ElementRef } - I need to save the MatChipList reference and not the element ref.

Any idea of what is the ideal way to loop and create those mat chip inputs dynamically for each basket ?

Answer 1

Seems you can use it like that based on the answer here . The values can be handled using the form controls. In my case, I had autocomplete with the chips which I then used viewChildren to handle closing

Answer 2

First the input element must be outside the mat-chip-list I think this is the issue in your code because angular create separated references by default with building directives like *ngFor.

<section *ngFor="let basket of baskets">

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let fruit of basket.fruits" [selectable]="selectable"
             [removable]="removable" (removed)="remove(basket, fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>

  <input placeholder="New fruit..."
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add(basket, $event)">
</mat-form-field>

</section>

Please refer to this demo on click the console reference each template-ref separately even they declared with same name: stackblitz

The console will show the difference as follows: