如何从 Angular 中的 JSON 响应向 formArray 添加数据？

Question

我有一个来自 firebase 的 JSON 响应，但是当我加载页面时它只显示 formArray 中的第一个数组而不是多个字段。请检查下面我的代码并指导我哪里错了。

这是我来自 firebase 的回复的快照。

代码

 ngOnInit(): void {
    this.loadForm();
    this.questionService.getQuestion(this.id).subscribe((res) => {
      this.editQuestionForm.patchValue({
        question: res.payload.data()['question'],
        type: res.payload.data()['type'],
        next_question: res.payload.data()['next_question'],
        actions: res.payload.data()['actions'],
      });
    });
   }

  loadForm() {
    this.editQuestionForm = this.fb.group({
      question: ['', Validators.required],
      type: ['', Validators.required],
      actions: this.fb.array([this.createActionFields()]),
      next_question: ['', Validators.required],
    });
  }

  action_fields(): FormArray {
    return this.editQuestionForm.get('actions') as FormArray;
  }

  createActionFields(): FormGroup {
    return this.fb.group({
      field: '',
      response: '',
    });
  }

  addActionFields() {
    this.action_fields().push(this.createActionFields());
  }

  removeActionFields(index) {
    this.action_fields().removeAt(index);
  }

这是输出

请检查我上面的代码并指导我，我该怎么做才能显示正确的数据。

Answer 1

如果动作有响应，您需要在动作中有一个与响应动作大小相同的控件。

例如，如果响应 return 5 个字段的数组，您需要 addActionFields() 五次，因为您使用 patchValue 您不会收到错误，但是您使用 setValue 你会看到错误。

this.questionService.getQuestion(this.id).subscribe((res) => {
    const actions = res.payload.data()['actions'];
    action.forEach( () =>{
      this.addActionFields();
    });

   this.editQuestionForm.patchValue({
     question: res.payload.data()['question'],
     type: res.payload.data()['type'],
     next_question: res.payload.data()['next_question'],
     actions
   });
 });

如何从 Angular 中的 JSON 响应向 formArray 添加数据？

How to add data in formArray from JSON response in Angular?

typescript

angular

angular-reactive-forms

angular-forms