Угловой коврик-автозаполнение с динамическими входами

Question

Я новичок в дизайне угловых материалов, и у меня возникла проблема с автоматическим заполнением матов для динамических входов. По умолчанию пользователь видит один вход, но когда выбрано какое-то значение, можно добавить другой вход, и это сложная часть - как сделать так, чтобы на всех этих входах использовался только один мат-автозаполнение? Является ли это возможным?

Ниже приведен код, в котором я использую mat-autocomplete. Функция addItem() добавляет другой вход, который будет привязан к тому же самому автозаполнению mat. Должен ли он быть перемещен выше? А как насчет уникального идентификатора? Как я могу решить эту проблему с несколькими входами, подключенными к одному мату автозаполнения?

          <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())
        );
}