Angular FormGroup.value помещает значения в массив

Question

Я использую Angular Material Stepper , чтобы создать простой тест True / False. В конце теста вы нажимаете кнопку отправки, которая вызывает службу, которая собирает ответы пользователей и сохраняет их.

Структура моего приложения выглядит следующим образом:

Это довольно просто. Вот машинописный код для вопросов-степпера, который использует сервис ответов

  //Push results to service so other components can use it
  gatherResults(){
    this._answerService.setAnswers(
                          Object.values(this.firstFormGroup.value),
                          Object.values(this.secondFormGroup.value), 
                          Object.values(this.thirdFormGroup.value),
                          Object.values(this.fourthFormGroup.value),
                          Object.values(this.fifthFormGroup.value),
                          Object.values(this.sixthFormGroup.value),
                          Object.values(this.seventhFormGroup.value),
                          Object.values(this.eigthFormGroup.value),
                          Object.values(this.ninthFormGroup.value),
                          Object.values(this.tenthFormGroup.value),
                          Object.values(this.eleventhFormGroup.value),
                          Object.values(this.twelthFormGroup.value)
                          );
    let answers = this._answerService.retrieveAnswers();
    console.log(answers);
  }

А вот полный код службы ответов

export class AnswersService {

  answers = {};
  constructor() { }

  setAnswers(a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12){
    this.answers = {
      answer1 : a1,
      answer2: a2,
      answer3: a3,
      answer4: a4,
      answer5: a5,
      answer6: a6,
      answer7: a7,
      answer8: a8,
      answer9: a9,
      answer10: a10,
      answer11: a11,
      answer12: a12
    }
  }

  retrieveAnswers(){
    return this.answers;
  }

}

Весь этот код работает, однако у меня есть одна небольшая проблема. Формат, в котором существует объект ответов. Когда я регистрирую объект ответов в службе ответов, он возвращает объект с массивами.

Могу ли я изменить это так, чтобы он больше походил на такой объект

РЕДАКТИРОВАТЬ

Я пытался удалить Object.Values ​​при вызове функции setAnswers в службе ответов. Это просто дает мне еще один объект в значении. Это то, что вы получаете, когда удаляете его из первых двух.

Answer 1

Object.values ​​(объект) преобразует объект в массив, поэтому, если вам нужно только первое значение, вы можете попробовать это.

  //Push results to service so other components can use it
  gatherResults(){
    this._answerService.setAnswers(
                          Object.values(this.firstFormGroup.value)[0],
                          Object.values(this.secondFormGroup.value)[0], 
                          Object.values(this.thirdFormGroup.value)[0],
                          Object.values(this.fourthFormGroup.value)[0],
                          Object.values(this.fifthFormGroup.value)[0],
                          Object.values(this.sixthFormGroup.value)[0],
                          Object.values(this.seventhFormGroup.value)[0],
                          Object.values(this.eigthFormGroup.value)[0],
                          Object.values(this.ninthFormGroup.value)[0],
                          Object.values(this.tenthFormGroup.value)[0],
                          Object.values(this.eleventhFormGroup.value)[0],
                          Object.values(this.twelthFormGroup.value)[0]
                          );
    let answers = this._answerService.retrieveAnswers();
    console.log(answers);
  }

И если вы хотите назвать все значения по имени, вы можете попробовать это:

//Push results to service so other components can use it
gatherResults(){
this._answerService.setAnswers(
                              this.firstFormGroup.value.firstCtrl,
                              this.secondFormGroup.value.secondCtrl, 
                              ..
                              //And similarly for all forms
                              );
let answers = this._answerService.retrieveAnswers();
console.log(answers);