如何使用索引创建多个芯片列表

Question

我需要在每次单击时添加新的芯片列表，但我面临的问题是，它会将相同的值绑定到每个添加的值的输入上。

        
          <div class="row" *ngIf="checkformType">
            <div class="col-sm-6">
              <h6 class="catTitle">Options</h6>
            </div>
            <div class="col-sm-6">
              <mat-form-field class="textField">
                <mat-chip-list #chipList>
                  <mat-chip *ngFor="let formValue of FormTypeValueArray" [selectable]="selectable" [removable]="removable"
                    (removed)="remove(formValue)">
                    {{formValue.form_type_value}}
                    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                  </mat-chip>
                  <input [disabled]="!checkformType" required placeholder="Add Options... "
                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputFor]="chipList"
                    [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)">
                </mat-chip-list>
                <mat-error>Cannot add values more then four values for radio button</mat-error>
                <div *ngIf="RadioformType">
                  <mat-hint class="error_msg">Minimum 2 values required</mat-hint>
                </div>
                <div *ngIf="Spinner">
                  <mat-hint class="error_msg">Minimum 5 values are required</mat-hint>
                </div>
                <div *ngIf="checkbox">
                  <mat-hint class="error_msg">Minimum 1 value is required</mat-hint>
                </div>
              </mat-form-field>
            </div>
          </div>
        <div *ngFor="let other of questionLevel.others; let i = index">
            
            <div class="row">
              <div class="col-sm-6">
                <h6 class="catTitle">Form Type</h6>
              </div>
              <div class="col-sm-6">
                <mat-form-field>
                  <mat-select (selectionChange)="formTypecheck($event)" required name="other_formTypesValue_{{i}}" [(ngModel)]="other.formTypesValue" 
                    placeholder="Select Form Type">
                    <mat-option *ngFor="let formTypes of formType" [value]="formTypes.id">
                      {{formTypes.name}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
            </div>
            
            <div class="row" *ngIf="checkformType">
              <div class="col-sm-6">
                <h6 class="catTitle">Options</h6>{{other.FormTypeValueArrayValue }}
              </div>
              <div class="col-sm-6">
                <mat-form-field class="textField">
                  <mat-chip-list #chipList1 >
                    <mat-chip *ngFor="let formValue of FormTypeValueArrayValue; let indx=index" [selectable]="i === 0" [removable]="other.removable"
                      (removed)="remove(formValue)">
                      {{formValue.form_type_value}}
                      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                    </mat-chip>
                    <input [disabled]="!checkformType" [(ngModel)]="other.Val" name="other_Val_{{i}}" required placeholder="Add Options... "
                      [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputFor]="chipList1"
                      [matChipInputAddOnBlur]="other.addOnBlur" (matChipInputTokenEnd)="addMultiple($event,indx)">
                  </mat-chip-list>
                  <mat-error>Cannot add values more then four values for radio button</mat-error>
                  <div *ngIf="RadioformType">
                    <mat-hint class="error_msg">Minimum 2 values required</mat-hint>
                  </div>
                  <div *ngIf="Spinner">
                    <mat-hint class="error_msg">Minimum 5 values are required</mat-hint>
                  </div>
                  <div *ngIf="checkbox">
                    <mat-hint class="error_msg">Minimum 1 value is required</mat-hint>
                  </div>
                </mat-form-field>
              </div>
            </div>
            
          </div>

强文本

所以代码的第一部分是普通角材料芯片列表，第二部分是按钮，在每次单击时都会创建芯片列表，但是在每个芯片列表上，输入值都具有相同的绑定关系，如何向#chiplist添加索引，因为它是动态值，可为芯片列表enter image description here的每个输入添加单独的值

下面是向输入添加值的功能

//Function for adding fomtypevalue 
  addMultiple(event: MatChipInputEvent,index): void {
    console.log(index,"index")
    const input = event.input;
    const value = event.value;
    console.log(value,"valueueeueu")
    if ((value || '').trim()) {
      this.FormTypeValueArrayValue.push({ form_type_value: value.trim()});
    }
    if (input) {
      input.value = '';
    }
  }