Данные слияния Angular Form из выбранных раскрывающихся меню

Как объединить значения из выпадающих меню в массив объектов? Есть два раскрывающихся меню (люди и страны) с предварительно заполненными значениями. Данные слияния Angular Form из выбранных раскрывающихся меню

поэтому при назначении страны человеку я пытаюсь получить данные в виде массива таких объектов, как: [{person: 'John', country: 'USA'}, {person: 'Pablo', country: 'Mexico'}], на основе выбора пользователя.

Я пытаюсь использовать FormArray, но что-то не так

Stackblitz

Для * ngFor. проверьте stackoverflow.com/questions/52530584/….

Swoox 27.09.2018 13:52

Правильно, спасибо. Есть ли способ переместить все объекты из формы в массив? Подает только последний объект stackblitz.com/edit/…

corry 27.09.2018 14:43
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
2
163
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно добавить formGroup в formArray на основе данных о количестве людей, поэтому, если у вас есть два человека, вам нужно создать две formGroup

нравится

this.selectForm = this.formBuilder.group({
  persons: this.formBuilder.array([
    this.formBuilder.group({
      'person': '',
      'country': ''
    }),
    this.formBuilder.group({
      'person': '',
      'country': ''
    })
  ])
});

или создайте базу formGroup по лицам

this.selectForm = this.formBuilder.group({
  persons: this.formBuilder.array(this.getFormGroupByN(this.personsData.length)
  )
});


getFormGroupByN(n: number) {
  let result = []
  for (let i = 0; i < n; i++) {
    result.push(this.formBuilder.group({
      'person': '',
      'country': ''
    })
    );
  } // for end 

  return result;
}

Я создал переменную для хранения данных о людях с именем personsData, поэтому я могу выполнить цикл и создать элемент option

this.personsData = this.parts.map(part => part.persons).reduce((r, part, []) => r.concat(part));

результат теперь выглядит так

[{"person":"John","country":"USA"},{"person":"Pablo","country":"Mexico"}]

демонстрация stackblitz

Другие вопросы по теме