Получить все материалы из массива в Angular

У меня есть этот код в 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]}))
    })
  }

angular angular-reactive-forms angular4-forms
person Joseph    schedule 08.11.2017    source источник
comment
Пожалуйста, размещайте здесь свой код, а не ссылку на код. Вопросы по отладке (почему этот код не работает?) должны включать желаемое поведение, конкретную проблему или ошибку и самый короткий необходимый код чтобы воспроизвести его в самом вопросе. Вопросы без четкого формулирования проблемы бесполезны для других читателей. См. раздел Как создать минимальный, полный и проверяемый пример.   -  person elixenide    schedule 08.11.2017
comment
@ЭдКоттрелл. я только что отредактировал это   -  person Joseph    schedule 08.11.2017
comment
Так-то лучше; Спасибо. Мне все еще довольно неясно, о чем вы спрашиваете, но я не специалист по Angular, поэтому, возможно, другой пользователь поймет это лучше.   -  person elixenide    schedule 08.11.2017
comment
@ЭдКоттрелл. Я получаю один материал, а не список.   -  person Joseph    schedule 08.11.2017
comment
Ну, вы всегда индексируете его с помощью [0], поэтому вы всегда будете получать только первый в своем выражении rows.push(...). Я не знаю, это ли вы имеете в виду, но это может показаться довольно очевидной проблемой. Тем не менее, мне действительно непонятно, что вы вообще пытаетесь сделать.   -  person elixenide    schedule 08.11.2017
comment
@ЭдКоттрелл. Проблема в индексе [0]. Именно поэтому получается только первый материал. Я не знаю, как получить все материалы   -  person Joseph    schedule 08.11.2017
comment
Вам нужно перебрать material.materials.   -  person elixenide    schedule 08.11.2017

Ответы (1)


arrow_upward
0
arrow_downward

Как упоминалось в комментариях, вам нужно перейти к вложенному массиву и поместить эти значения в массив формы. Итак, ваш 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'}))
    })
  })
}

обратите внимание, что у вас нет quantity в вашем JSON. Также это решение учитывает только то, что у вас есть только один объект в массиве orders. Если вы знаете, что их больше, вам также необходимо создать группы форм в вашем формате.

DEMO

person AJT82    schedule 08.11.2017
comment
Ну поле уже есть! Я просто присвоил ему значение «в ваших данных нет количества». Вы просто удаляете это строковое значение.... - person AJT82; 08.11.2017
comment
Как я могу добавить Validators.required в поле количества? - person Joseph; 08.11.2017
comment
Привет, Алекс. Не могли бы вы помочь в этом вопросе. Я уже пробовал это stackoverflow.com/questions/48821635/. Спасибо - person Joseph; 16.02.2018