ngFor中的Angular 8 Mat-Autocomplete仅显示在最后一项上答案

【问题标题】：Angular 8 Mat-Autocomplete inside ngFor just showing on the last itemngFor中的Angular 8 Mat-Autocomplete仅显示在最后一项上
【发布时间】：2020-11-25 23:52:53
【问题描述】：

我正在使用 Angular 8 中的 FormArray 做一个自定义表单，并且在每个位置我都有一个自动完成作为输入，但行为不是我所期望的。它只显示在 las 位置输入上。

代码：

<div formArrayName="assignments" *ngFor="let item of myForm.get('assignments')['controls']; let i = index;">
    <ng-container [formGroupName]="i">
        <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="10px">                       
           <mat-form-field fxFlex="30">
                <mat-label>{{ 'product.providers.txt.provider' | translate}}</mat-label>
                <input type="text" matInput formControlName="id_provider"[matAutocomplete]="providers">
                <mat-autocomplete #providers="matAutocomplete" [displayWith]="displayPv">
                     <mat-option *ngFor="let option of filteredOptions[i] | async" [value]="option.id">
                         {{option.provider_business_name}}
                     </mat-option>
                 </mat-autocomplete>
            </mat-form-field>
        </div>
     </ng-container>
</div>

这是一个例子：

【问题讨论】：

你能创建 stackblitz 吗？
我无法复制相同的示例，但它基本上是表单数组内的 Angular Material Autocomplete，仅适用于该 FormArray 的最后一个输入，可能它失去了焦点，或者它并不意味着在里面使用一个表单数组！

标签： angular autocomplete angular-material angular8

【解决方案1】：

因为我是从 API 接收数据，所以我没有在每个循环上添加控件，这就是我解决它的方法！

setExistingAssignments(assignmentsSet) {
        const control = this.myForm.get('assignments') as FormArray;

        assignmentsSet.forEach(s => {
            control.push(this.fb.group({
                // Some assignaments
            }));
            this.ManageNameControl(control.length - 1); // This is the function
        });

        this.available = true;
        return control;
    }

// The function
ManageNameControl(index: number) {
        const arrayControl = this.myForm.get('assignments') as FormArray;

        if (arrayControl.length > 0) {
            this.filteredOptions[index] = arrayControl.at(index).get('id_provider').valueChanges
                .pipe(
                    startWith<string>(''),
                    map(value => typeof value === 'string' ? value : value['id_provider']),
                    map(name => name ? this._filter(name, 'provider') : this.options.slice())
                );
        }

    }

所以之前的函数在循环之外！现在它在里面，所以它会在每个位置添加一个控件并搜索该行！

非常感谢！

【讨论】：