Question

我是棱角材料设计的新手，对于动态输入的垫自动完成功能有问题。默认情况下，用户看到一个输入，但是当选择某个值时，可以添加另一个输入，这是棘手的部分-如何使所有这些输入仅使用一个垫自动完成功能？有可能吗？

下面是我使用mat-autocomplete的代码。 addItem（）函数将添加另一个输入，该输入将绑定到相同的mat-autocomplete。它应该移到上方吗？唯一ID呢？如何通过将多个输入连接到同一mat-autocomplete来解决此问题？

          <div formArrayName="items"
               class="form-group"
               *ngFor="let item of items.controls; let i = index">
            <mat-form-field class="example-full-width">
              <input required
                     type="text"
                     placeholder="Item ID"
                     matInput
                     [formControlName]="i"
                     [id]="i"
                     [matAutocomplete]="auto">
              <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let option of filteredOptions | async"
                            [value]="option.code"
                            (click)="selectOption(option, i)">
                  {{option.code}}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>
            <i *ngIf="i == 0 && selected" 
               class="fa fa-plus add-vessel"
               aria-hidden="true"
               (click)="addItem()"></i>
            <i *ngIf="i !== 0 && canRemove"
               class="fa fa-minus add-vessel"
               aria-hidden="true"
               (click)="removeItem(i)"></i>
          </div>

Answer 1

您必须使用多个自动完成元素，并且所有输入都需要与valueChanges事件捕获函数数组绑定。原因是，如果您尝试将valueChanges与formArray（“ items”）绑定，则该函数将执行次数，即数组中有多少输入。使用以下代码实现目标。

for(var i = 0;i<numberOfInputElements;i++){
    const items = this.form.get('items') as FormArray;
    this.filteredOptions[index] = items.at(index).get('item').valueChanges
        .pipe(
          startWith(''),
          map((value: string) => (value) ? this._filter(value, this.options) : this.options.slice())
        );
}

带动态输入的角垫自动完成

1 个答案: