拖放 angular 順序不變

Question

我基於此https://stackblitz.com/edit/angular-dynamic-survey-creation-golkhg創建表單構建器，我使用此 function 進行丟棄

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

Answer 1

您需要在 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);
   });
}

Answer 2

嘗試將 changeDetectionStrategy 添加到您的組件

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

Answer 3

方法示例：

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