带动态输入的Angular mat-autocomplete

Question

我是一个新的角度材料设计，我有一个问题的mat-autocomplete的动态输入。默认情况下，用户会看到一个输入，但当某些值被选中时，可以添加另一个输入，这是一个棘手的部分-如何使所有这些输入只使用一个mat-autocomplete？有可能吗？

下面是我使用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())
        );
}