错误类型错误：value.forEach不是一个函数。

Question

我将为您翻译关于IT技术的内容。需要创建一个使用FormArray的Angular 6更新表单。

我在editform.TS中使用以下代码：

  valueIngrident=new FormArray([]);

    constructor(private brandService:BrandService,private PValueInfoService:ProductinfovalueService,private productinfoService:ProductinfoService,private catService:CategoryService,private produSrvice:ProductService, private route:ActivatedRoute,private fb:FormBuilder) {
    this.id= + this.route.snapshot.paramMap.get('id');
    this.productVM=this.produSrvice.InitialProduct();

   }

  ngOnInit() {

    this.InitialForm()
    this.GetMainCat();
    }

  InitialForm(){
    this.editFG=this.fb.group({
      productTitle:['',Validators.compose([Validators.required])],
      productName:['',Validators.compose([Validators.required])],
      color:['',Validators.compose([Validators.required])],
      productImageName:['',Validators.compose([Validators.required])],
      price:['',Validators.compose([Validators.required])],
      gurantyMonth:['',Validators.compose([Validators.required])],
      gurantyCompanyName:['',Validators.compose([Validators.required])],
      catId:['',Validators.compose([Validators.required])],
      brandId:['',Validators.compose([Validators.required])],
      values:this.valueIngrident
    })
    this.GetProductByID(this.id)
  }

  public GetProductByID(id:number){
    this.produSrvice.GetProductDetailById(id).subscribe((data)=>{
      this.productVM=data
      this.SelectBrand=data.brandId
      this.SelectCat=data.catId
      this.PName=this.productVM.productName
      this.editFG.setValue({
        productTitle:[data.productTitle],
        productName:[data.productName],
        color:[data.color],
        productImageName:[data.productImageName],
        price:[data.price],
        gurantyMonth:[data.gurantyMonth],
        gurantyCompanyName:[data.gurantyCompanyName],
        catId:[data.catId],
        brandId:[data.brandId],
        values:this.valueIngrident
      })
      this.ChangeFormByType(data.catId)
  })
  }

  get ValueFormControl(){
    return  this.editFG.get('values') as FormArray;
}

  public CreateValueFiled(PD:Productinfovalue[]){
    for(let element of PD )
    {
      this.valueIngrident.push(
        new FormGroup({
          infoId:new FormControl(element.infoId),
          value:new FormControl(element.value)
        })
      )
    }
}

  public ChangeFormByType(id:number){
    this.ChangeBrand(id)
      this.PValueInfoService.GetAllInfoValueForUpdate(id).subscribe(
        res=>{
          this.PD=res,
          this.CreateValueFiled(this.PD)
        }
      )
  }

我在HTML中使用它：

                <div class="form-inline lbin" formArrayName="values">
                <div class="form-inline lbin" *ngFor="let valueCtrl of ValueFormControl.controls; let i=index" [formGroupName]="i">
                    <div  class="form-inline lbin">
                        <label></label> 
                        <input formControlName="value" >
                    </div>
                </div>
            </div>

但是当页面加载时，它显示了这个错误：

错误类型：TypeError: value.forEach 不是一个函数 位于 FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray.setValue (forms.js:3545)

问题出在哪里？

- Mr-Programer

---

需要检查来自 this.editFG.get('values') 的返回值，因为它不是一个数组。你应该进行防御性测试，因为它来自一个不受控制的源。如果无效，则抛出并处理或返回一个空数组。 - Randy Casburn

this.valueIngrident 是什么？ - User 5842

@User5842 valueIngrident=new FormArray([]) @User5842 valueIngrident=new FormArray([]) - Mr-Programer

@RandyCasburn，values 是一个表单数组。 - Mr-Programer

@Mr-Programer - 请阅读下面的答案！ - Randy Casburn

Answer 1

FormArray有setValue函数。第一个参数应该是一个数组，而你正在发送一个对象。

看一下你的函数GetProductByID(id:number)中间部分。在这里，你调用了this.editFG.setValue({...})

来自官方文档:

setValue(value: any[], options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void 参数 value any[] 控件的值数组

options object 配置选项，确定控件在值更改后如何传播更改并发出事件

onlySelf: 当为true时，每个更改仅影响此控件，而不是其父控件。默认为false。emitEvent: 当为true或未提供（默认情况下），statusChanges和valueChanges可观察对象都会在控件值更新时发出包含最新状态和值的事件。当为false时，不发出任何事件。配置选项传递给updateValueAndValidity方法。可选。默认值为{}。

返回void

你的参数被包裹在{}中，使其成为一个对象。而函数规范要求它必须是一个数组。

setValue函数调用了数组上的forEach方法，而对象上没有forEach方法，因此会报错"value.forEach不是一个函数"。

- jumps4fun