Angular 8 Mat-Autocomplete inside ngFor 只顯示在最后一項

Question

我在 Angular 8 和每個 position 中使用 FormArray 做一個自定義表單，我有一個自動完成作為輸入，但行為不是我所期望的。 它只顯示在 las position 輸入上。

代碼：

 <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>

這是一個例子：

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

    }

所以之前的 function 在循環之外！ 現在它在里面，所以每個 position 它將添加一個控件並搜索該行！

非常感謝！