如何解决删除项目后刷新 FormArray
我有一个 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>
这是 component.ts :
this.repairerForm = this.fb.group({
internalCompany: ['',Validators.required],repairerCoordinator: [''],passportInfo : this.fb.group({
repairerType: ['',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 但它没有更新!有人可以帮我吗?
解决方法
这似乎是错误的。您正在调用一个服务然后订阅它,但是您应该声明控件并将其从表单数组中删除,然后调用删除服务 - 我修改了,这可能不准确,但它更接近您想要的.
removeSkill(skillItem: string,i: number): void {
const control = this.createSkillActivitylevel.controls.skillitem as FormArray;
this.repairerService.removeRepairerSkill(skillItem)
control.removeAt(i);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。