Angular 7 Reactive Formarray 级联下拉列表 - 如何以 UI 形式加载保存的数据

Question

我关注了 Whosebug link

并达到了预期的效果。最重要的是，当用户尝试再次编辑选项时，我想将保存的数据从数据库加载回 UI 。我几乎已经实现了，但是第二个下拉列表存在问题。需要有关为每个 formarray 行动态加载 wheres[] 的帮助。我在数据库中保存 formarray json 并检索它并迭代。

options: string - 存储formarray的DB中的变量名

private retrieveSavedControls(options: string): FormArray{
console.log(classes);
this.profileForm= this.fb.group({
  optionGroups: this.fb.array([])
})
const control = <FormArray>this.profileForm.controls['optionGroups'];

this.units = JSON.parse(options).optionGroups;
console.log('parsed json: ',this.units);
let index =0;
this.units.forEach(unit => {

  control.push(this.fb.group({
    selectInput: ['', Validators.required],
    whereInput: [[], Validators.required]
  }));
  // this part should've loaded the list for each of the 2nd dropdown but not loading.
  this.wheres[unit.selectInput] = this.getWhere().filter((item)=> item.selectid == unit.selectInput); 

   (<FormArray>this.profileForm.controls['optionGroups']).controls[index]
    .patchValue({ selectInput: unit.selectInput, whereInput: unit.whereInput});
  index++
})
console.log('control: ',control)
return control;

}

Answer 1

全部。这是我的代码的问题。由于某种原因，实际列表是空的。它已修复并成功加载了针对每个单独列表的选定值。

Angular 7 Reactive Formarray 级联下拉列表 - 如何以 UI 形式加载保存的数据

Angular 7 Reactive Formarray cascading dropdown - How to load saved data back in UI form

cascadingdropdown

typescript

angular

angular-reactive-forms

formarray