删除项目后刷新 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>

这是 component.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

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

removeSkill(skillItem: string,i: number): void {

    const control = this.createSkillActivitylevel.controls.skillitem as FormArray;
    this.repairerService.removeRepairerSkill(skillItem)
    control.removeAt(i);
  }

删除项目后刷新 FormArray

Refresh FormArray after removing an item

angular

angular-reactive-forms

formarray