Отсутствие желаемого результата в массиве форм из ответа в angular

Question

Я создал экзаменационный портал, где администратор может создавать викторины. Но как только я собираюсь редактировать тест, я не получил все вопросы и параметры в массиве форм из ответа. Но когда я редактирую и получаю данные массива локально, он работает нормально.

Html: -

<div
  *ngFor="let list of trainingItemList; let i = index"
  cdkDrag
  class="orderTraining-list"
>
  <div
    (click)="getData(list.path,i,list.type,list.id,list.name,list.quizInstruction,list.quizTime,list.questionList, list.order)"
    class="orderTraining-box"
  >
    <span class="btn-icon"
      ><i
        class="buy-icon"
        [class.bi-videocam]="list.type == 'video/mp4'"
        [class.bi-wallpaper]="list.type == 'image/jpeg' && 'image/png'"
        [class.bi-question-answer]="list.type == 'quiz'"
      ></i></span
    >{{list.name}}
  </div>
</div>

TS: -

 ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    if(this.id != null){
      this.createName = 'Update Changes';
      this.createTraining.editTraining(this.id).subscribe((response:any)=>{
        this.trainingForm.get('trainingName').setValue(response.name);
        this.trainingItemList = response.trainingItemList;
      })
    }
    this.createQuizForm();
    this.createForm();
  }


 trainingItemList: Array<TrainingItemList> = [];

getData(path, i, type,id, name, quizInstruction, quizTime, questionList) {
    this.index = i;
    this.type = type;
    if (type == 'image/jpeg') {
      this.format = 'image';
      this.show = true;
      this.showUpload = false;
      this.showDelete = true;
      this.showQuiz = false;
      this.url = 'http://api/training/getMedia?path=' + path;
    }
    if (type == 'video/mp4') {
      this.format = 'video';
      this.show = true;
      this.showUpload = false;
      this.showDelete = true;
      this.showQuiz = false;
      this.url = 'http://api/training/getMedia?path=' + path;
    }
    if (type == 'quiz') {
      this.showQuiz = true;
      this.showUpload = false;
      this.showDelete = false;
      this.show = false;
      this.quiz = true;
      this.quizForm.patchValue({
        id:id,
        name: name,
        order: this.position,
        type: type,
        path: null,
        quizTime: quizTime,
        quizInstruction: quizInstruction,
        questionList: questionList
      })
     
      // this.quizForm.controls['questionList'] = this.fb.array(questionList.map((i:QuestionList)=>this.fb.group({questionText : i.questionText, 
      //   optionList:this.fb.array(i.optionList.map((j:OptionList)=>this.fb.group(
      //     {optionText:j.optionText, isAnswer:j.isAnswer}
      //     ))) 
      // })));
      console.log(questionList);
      console.log(this.quizForm.value.questionList);
    }
  }

createQuizForm() {
    this.quizForm = this.fb.group({
      id:[''],
      name: ['', Validators.required],
      type: ['quiz'],
      path: [null],
      order: this.position,
      quizTime: ['', [Validators.required, Validators.pattern('^[1-9][0-9]*$')]],
      quizInstruction: ['', Validators.required],
      questionList: this.fb.array([this.initQuestions()]),
    })
  }

  initQuestions(): FormGroup {
    return this.fb.group({
      id:[''],
      questionText: ['', Validators.required],
      optionList: this.fb.array([this.initOptions()]),
      timestamp:['']
    })
  }

  initOptions(): FormGroup {
    return this.fb.group({
      id:[''],
      optionText: ['', Validators.required],
      isAnswer: ['true', Validators.required],
      timestamp:['']
    })
  }

export interface TrainingItemList {
  id:number,
  name: string,
  order: number,
  type: string,
  path: string,
  quizTime: number,
  quizInstruction: string,
  questionList: any
}

Вывод: - когда получение ответа от api в параметре функции getData questionList (getData (questionList) -

when just edit the array without saving into API and call the same function getData(questionList)-

введите описание изображения здесь

Как вы можете видеть выше код во втором массиве, я получаю только 1 вопрос, где в приведенном выше массиве есть 2 вопроса.

эти выходные данные исходят из приведенного выше кода -

  console.log(questionList);
  console.log(this.quizForm.value.questionList);

Answer 1

  const question = this.quizForm.get('questionList') as FormArray;

      question.clear();
      questionList.forEach(element => {
        
        question.push(
          this.fb.group({
            id:element.id,
            questionText:element.questionText,
            optionList:this.setOptions(element)
          })
        )
      });

    }
  }

  setOptions(x) {
    let arr = new FormArray([])
    x.optionList.forEach(y => {
      arr.push(this.fb.group({ 
        id:y.id,
        optionText:y.optionText,
        isAnswer:y.isAnswer
      }))
    })
    return arr;
  }

Используя это, я могу получить значение массива массива (вложенный массив) в качестве значения патча