[英]drag and drop angular order not changing
我基于此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
您需要在 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);
});
}
尝试将 changeDetectionStrategy 添加到您的组件
方法示例:
onDrop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.surveyForm.get('surveyQuestions')['controls'], event.previousIndex, event.currentIndex);
this.surveyForm.get('surveyQuestions').updateValueAndValidity({ onlySelf: false });
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.