Angular响应式表单多复选框更新功能失效问题求助

我正在开发一个Angular响应式表单，表单包含多个文本框，新增功能运行正常，但从表格编辑用户数据时，多选复选框功能无法正常工作。

操作步骤 #

• 表格数据：从数据库获取表格数据
• 点击编辑按钮，为表单赋值
• 更新单个复选框
• 功能异常展示

相关代码 #

复选框状态处理逻辑（project.ts） #

onChecked(e: any) {
    console.log("checkbox ", e.target.value, e.target.checked);
    const checkedValue = e.target.value
    const checked = e.target.checked
    const checkedArray = this.prodform.get('checkBoxes') as FormArray
    if (checked) {
      checkedArray.push(new FormControl(checkedValue))
    }
    else {
      let i = 0
      checkedArray.controls.forEach((item) => {
        console.log("else");
        console.log(item.value + "item");
        console.log(checkedValue + "checkedValue");
        if (item.value == checkedValue) {
          console.log("else-if");
          checkedArray.removeAt(i)
          console.log(item.value + "item");
          console.log(checkedValue + "checkedValue");
        }
        i++;
      })
    }
    console.log(checkedArray.value + " : checkedArray");
  }

模板代码片段 #

{{check}} 

编辑时表单赋值代码 #

editProduct(id: any) {
    this.formhide = true
    this.displayflag = false
    this.isUpdate = true
    this.currentID = id
    this.prodservice.getproductById(id).subscribe(
      (data: any) => {
        this.dbproducts = data
        console.log(this.dbproducts, "dbproducts");

        this.prodform.get('productname')?.patchValue(this.dbproducts.productname)
        this.prodform.get('brandname')?.patchValue(this.dbproducts.brandname)
        this.prodform.get('category')?.patchValue(this.dbproducts.category)
        this.prodform.get('date')?.patchValue(this.dbproducts.date)
      },
      (error: HttpErrorResponse) => {
        alert("there is no data found for given input")
      }
    )
    console.log(this.dbproducts, "edited values");
  }

更新按钮处理代码 #

update(formvalues: any) {
    this.prodservice.editproduct(this.currentID, this.prodform.value).subscribe((data) => {
      console.log("formvalues : ", formvalues);
      console.log(data);
    })
    this.allProducts()
    this.displayflag = true
    this.formhide = false
  }

内容的提问来源于stack exchange，提问作者Lucky Gore