使用 Angular 中的反应形式修补数组内部的数组

Question

我试图在rows FormArray 中显示details FormArray。我需要帮助，因为我无法显示details FormArray 的数据。我只知道如何显示rows FormArray 但details FormArray 对我来说很难。这是我在下面尝试过的。 请查看我创建的这个 STACKBLITZ 文件。

CLICK THIS LINK

谢谢。

  patchValues() {
        let rows = this.myForm.get('rows') as FormArray;
        this.orders.sales.deliveries.forEach(item => {
            rows.push(this.fb.group({
                delivery_number: item.delivery_number,
                id: item.sales_delivery_id,
                details: this.fb.array([this.patchDetails(item.details, item.details.length-1)])

            }));
        });
  }

  patchDetails(item_details, i) {
        let rows =  (<FormArray>this.myForm.controls['rows']).controls[i]['controls']['details'] as FormArray
        item_details.forEach(item => {
            rows.push(this.fb.group({
                sku: item.ingredient_name
            }));
        });
        console.log(rows)
  }

Answer 1

details: this.fb.array([this.patchDetails(item.details, item.details.length-1)])

您在创建表单数组时调用patchDetails，但该方法不返回任何内容，您可以修改patchDetails 以返回FormArray，类似这样

    patchValues(): void {
        let rows = this.myForm.get('rows') as FormArray;
        this.orders.sales.deliveries.forEach(item => {
            rows.push(this.fb.group({
                delivery_number: [item.delivery_number],
                id: [item.sales_delivery_id],
                details: this.patchDetails(item.details)
            }));
        });
    }


    patchDetails(item_details: any[]): FormArray {
        let detailsFormArray: FormArray = new FormArray([]);
        item_details.forEach(item => detailsFormArray.push(this.fb.group({
          sku: [item.ingredient_SKU],
          name: [item.ingredient_name]
        })));
        return detailsFormArray;
    }

Stackblitz