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

【问题标题】：Get All Materials from Array in Angular从Angular中的数组获取所有材料
【发布时间】：2017-11-08 03:34:27
【问题描述】：

我在 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]}))
    })
  }

【问题讨论】：

请在此处发布您的代码，而不是代码链接。寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误和必要的最短代码 在问题本身中重现它。没有明确的问题陈述的问题对其他读者没有用处。见：How to create a Minimal, Complete, and Verifiable example.
@EdCottrell。我刚刚编辑了它
这样更好；谢谢。我仍然不清楚你在问什么，但我不是 Angular 的人，所以也许其他用户会更好地理解它。
@EdCottrell。我得到的是一份材料，而不是一份清单。
嗯，你总是用[0] 来索引它，所以你总是只会得到rows.push(...) 语句中的第一个。我不知道这是否是您所指的，但这似乎是一个非常明显的问题。也就是说，我真的不清楚你到底想做什么。

标签： angular angular-reactive-forms angular4-forms

【解决方案1】：

如 cmets 中所述，您需要迭代嵌套数组并将这些值推送到您的表单数组。所以你的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 数组中只有一个对象。如果您知道还有更多，您还需要在您的表单数组中创建表单组。

DEMO

【讨论】：

这个领域已经存在了！我刚刚为它分配了一个值“您的数据中没有数量”。您只需删除该字符串值....
如何在数量字段中添加 Validators.required？
嗨，亚历克斯。你能帮忙回答这个问题吗？我已经尝试过stackoverflow.com/questions/48821635/…。谢谢