删除项目后刷新FormArray

Question

我有一个formArray，我想从中删除一个项，它已从数据库中删除，但没有在浏览器中更新！

这是html:

<div formArrayName="skillsActivitieslevels">
<h6>Skills and activity levels</h6>
<ng-container *ngFor="let skillItem of skillsActivitieslevels.controls; let i=index">
<ng-container [formGroup]="skillItem">
<div class="row">
<div class="col-md-1 margin-top">
<div style="cursor: pointer;"(click) = "remove(skillItem,i)"><i class="fas fa-trash"></i></div>
</div>
<div class="col-md-4">
<kendo-formfield >
<kendo-combobox [data]="skillsList" [textField]="'name' [valueField]="'id'" [valuePrimitive]="false" formControlName="skill">
</kendo-combobox>
</kendo-formfield>
</div>
<div class="col-md-6 margin-top">
<span>Small</span>
<input type="checkbox" #small kendoCheckBox formControlName="isSmall" />   
</div>
</div>
</ng-container>
</ng-container>
</div>

这是组件。ts:

this.repairerForm =  this.fb.group({
internalCompany: ['', Validators.required],
repairerCoordinator: [''],
passportInfo : this.fb.group({
repairerType: ['', Validators.required],
skillsActivitieslevels : this.fb.array([
])
})
})
get skillsActivitieslevels(){
return  this.passportInfoForm.get('skillsActivitieslevels') as FormArray
}
addSkill(skillsActivities :SkillActivitiesLevel = new SkillActivitiesLevel()){
this.skillsActivitieslevels.push(this.createSkillActivitylevel(skillsActivities))
}
createSkillActivitylevel(skillsActivities :SkillActivitiesLevel = new 
SkillActivitiesLevel()) :  FormGroup {
return this.fb.group({
id : [skillsActivities.repairerSkillId],
skill: [skillsActivities.skill],
isSmall: [skillsActivities.isSmall],
)}
}
remove(skillItem,i){
console.log("item",skillItem.value)
this.repairerService.removeRepairerSkill(skillItem.value.id).subscribe(data => 
{  this.skillsActivitieslevels.removeAt(i);
}
)
}

我使用了removeAt，但它没有更新！有人能帮我吗？

Answer 1

这似乎是错误的。您正在调用一个服务，然后订阅它，但您应该声明控件并从表单数组中删除它，然后调用remove服务——我修改了它，这可能不准确，但它更接近您想要的。

removeSkill(skillItem: string,i: number): void {
const control = this.createSkillActivitylevel.controls.skillitem as FormArray;
this.repairerService.removeRepairerSkill(skillItem)
control.removeAt(i);
}