从 Angular 中的数组中获取所有材料

Question

我在 stackblitz 中有这段代码需要获取所有材料。我怎样才能得到所有的材料，而不仅仅是一个。输出只是一种材料而不是列表？下面是我的代码 https://stackblitz.com/edit/angular-qssycg?file=app/app.component.ts

JSON

orders =
  [
  {
    "id": 1,
    "name": "Not Available",
    "address": "Not Available",
    "city": "Not Available",
    "contact_number": "Not Available",
    "created_at": "2017-10-26 16:12:22",
    "updated_at": "2017-10-26 16:12:22",
    "materials": [
      {
        "id": 21,
        "sku": "D22D12D4",
        "name": "D-2, 2D-1, 2D-4",
        "created_at": "2017-10-26 03:03:43",
        "updated_at": "2017-10-26 03:03:43",
        "pivot": {
          "supplier_id": 1,
          "material_id": 21
        }
      },
      {
        "id": 40,
        "sku": "ACWNAIL",
        "name": "Assorted C.W. Nails",
        "created_at": "2017-10-26 03:19:54",
        "updated_at": "2017-10-26 03:23:21",
        "pivot": {
          "supplier_id": 1,
          "material_id": 40
        }
      },
      {
        "id": 49,
        "sku": "DDJENAMEL",
        "name": "Doors & Door Jambs - Enamel",
        "created_at": "2017-10-26 03:33:06",
        "updated_at": "2017-10-26 03:33:06",
        "pivot": {
          "supplier_id": 1,
          "material_id": 49
        }
      }
    ]
  }
]

ts

patchValues() {
    let rows = this.myForm.get('rows') as FormArray;
    this.orders.forEach(material => {
      rows.push(this.fb.group({material_id: material.materials[0].id,material_name: material.materials[0].name, quantity: material.materials[0]}))
    })
  }

Answer 1

如评论中所述，您需要迭代到嵌套数组并将这些值推送到表单数组。所以你的 patchValues 应该是这样的：

patchValues() {
  let rows = this.myForm.get('rows') as FormArray;
  this.orders.forEach(material => {
    material.materials.forEach(x => {
      rows.push(this.fb.group({material_id: x.id,
                               material_name: x.name, 
                               quantity: 'there is no quantity in your data'}))
    })
  })
}

请注意，您的 JSON 中似乎没有 quantity。此外，此解决方案仅考虑到 orders 数组中只有一个对象。如果你知道还有更多，你还需要在你的 formarray 中创建 formgroups。

DEMO

从 Angular 中的数组中获取所有材料

Get All Materials from Array in Angular

angular

angular-reactive-forms

angular4-forms