javascript - 错误类型错误 : value. forEach 不是函数

Question

我需要使用 FormArray 从 angular 6 创建一个更新。

我在 editfrom.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>

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

ERROR TypeError: value.forEach is not a function at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray.setValue (forms.js:3545)

问题是什么？

Answer 1

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

查看函数的中间 GetProductByID(id:number) 在这里调用 this.editFG.setValue({...})

From the official documentation :

setValue(value: any[], options: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void Parameters value any[] Array of values for the controls

options object Configure options that determine how the control propagates changes and emits events after the value changes

onlySelf: When true, each change only affects this control, and not its parent. Default is false. emitEvent: When true or not supplied (the default), both the statusChanges and valueChanges observables emit events with the latest status and value when the control value is updated. When false, no events are emitted. The configuration options are passed to the updateValueAndValidity method. Optional. Default is {}.

Returns void

您的参数包含在 {} 中，这使它成为一个对象。函数规范说它需要是一个数组。

setValue 函数在数组上调用 forEach，对象没有 forEach，这就是为什么它说 value.forEach 不是函数。