Angular ngFor 中的 8 个 Mat-Autocomplete 仅显示在最后一项
Angular 8 Mat-Autocomplete inside ngFor just showing on the last item
我正在用 Angular 8 中的 FormArray 做一个自定义表单,并且在每个位置我都有一个自动完成作为输入,但行为不是我所期望的。它只是显示在激光位置输入上。
代码:
<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>
这是一个例子:
因为我从 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())
);
}
}
所以之前的函数是在循环外的!现在它在里面,所以在每个位置上它都会添加一个控件并搜索该行!
非常感谢!
我正在用 Angular 8 中的 FormArray 做一个自定义表单,并且在每个位置我都有一个自动完成作为输入,但行为不是我所期望的。它只是显示在激光位置输入上。
代码:
<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>
这是一个例子:
因为我从 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())
);
}
}
所以之前的函数是在循环外的!现在它在里面,所以在每个位置上它都会添加一个控件并搜索该行!
非常感谢!