0

我基于此https://stackblitz.com/edit/angular-dynamic-survey-creation-golkhg创建表单构建器，并且我使用此功能删除

onDrop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.surveyForm.get('surveyQuestions')['controls'], event.previousIndex, event.currentIndex);
}

必须questionTitle改变，但事实并非如此

在此处输入图像描述

但在 html 中它正在改变

在此处输入图像描述

数组的顺序在 html 中发生了变化，但在我的 json 中没有改变，有人可以帮助我吗？

编辑

过了一会儿我不再碰这个代码，我发现了一些错误，请看之前和之后的图像，这里是之前

前

"quizQuestions": [
    {
      "questionType": "File Upload",
      "display_order": 1,
      "questionGroup": {
        "questionTitle": "",
        "quizAnswer": ""
      }
    },
    {
      "questionType": "Tanggal",
      "display_order": 2,
      "questionGroup": {
        "questionTitle": "",
        "quizAnswer": ""
      }
    }
  ],

在我拖动第一个表单后，它看起来像这样

后

"quizQuestions": [
    {
      "questionType": "Tanggal",
      "display_order": 2,
      "questionGroup": {
        "questionTitle": "",
        "quizAnswer": ""
      }
    },
    {
      "questionType": "File Upload",
      "display_order": 1,
      "questionGroup": {
        "questionTitle": "",
        "quizAnswer": ""
      }
    }
  ],

实际上有什么问题？我已经尝试了你们提供的两种最佳解决方案，但仍然是这样，请帮帮我。注意：我将 surverysQuestions 更改为 quizQuestions

4

3 回答 3

2

您需要在 formGroup 中添加 display_order 属性，您可以在该属性中看到顺序更改。

并在 onDrop 方法中更改其他问题的显示顺序。像这样的东西：

onDrop(event: CdkDragDrop<string[]>) {
   moveItemInArray(this.surveyForm.get('surveyQuestions')['controls'], event.previousIndex, event.currentIndex);
   this.questionFormArray.controls[event.currentIndex]['controls']['display_priority']
            .setValue(event.currentIndex + 1);
   this.questionFormArray.controls.forEach((category, index) => {
            (category as FormGroup).controls['display_priority'].setValue(index + 1);
   });
}
于 2020-04-13T06:59:10.913 回答
0

方法示例：

onDrop(event: CdkDragDrop<string[]>) {
   moveItemInArray(this.surveyForm.get('surveyQuestions')['controls'], event.previousIndex, event.currentIndex);
  this.surveyForm.get('surveyQuestions').updateValueAndValidity({ onlySelf: false });
}
于 2020-05-15T11:00:25.977 回答
0

尝试将 changeDetectionStrategy 添加到您的组件

https://angular.io/api/core/ChangeDetectionStrategy

于 2020-04-13T05:27:01.990 回答