Я использую Angular Material Drag N Drop CDK, чтобы переместить набор элементов по умолчанию (Список 1) в список динамических элементов (Список 2).Когда я перетаскиваю элемент по умолчанию (L1) в динамические элементы (L2), а затем обновляю теперь динамический элемент (новые элементы L2), он также обновляет элемент по умолчанию (старый элемент L1).
Когдавы перетаскиваете элемент по умолчанию (L1) в динамический элемент (L2), список по умолчанию (L1) сбрасывается обратно в исходный массив с помощью метода resetList.Моя цель - обновить динамический элемент (новый элемент L2) и потенциально перетащить тот же элемент по умолчанию (старый элемент L1, который был сброшен) в динамический список (L2), создав еще один новый динамический элемент (еще один новый элемент L2).Проблема, с которой я сталкиваюсь, заключается в том, что, когда я перетаскиваю элемент по умолчанию (L1) в динамический список (L2), затем обновляю новый динамический элемент (новый элемент L2 с помощью ngModel) элемент по умолчанию (старый элемент L1), который был перетащен, и сбрасываетсятакже обновления.
Вот мой HTML-файл в form.component.html
<!-- Default Answer List - List 1 -->
<aside cdkDropList id="defaultAnswerList"
[cdkDropListConnectedTo]="['dynamicAnswerList']" [cdkDropListData]="defaultAnswers">
<div class="aside-container">
<div class="auto-complete-content-area p-10">
<div *ngFor="let answer of defaultAnswers">
<!-- answer.isInput - Text Input -->
<div class="element-wrapper addon-group" *ngIf="answer.isInput" cdkDrag>
<div class="label-side">
Short Text
</div>
<div class="element-side">
<input type="text" [(ngModel)]="answer.placeholderText" class="input-element"
placeholder="Placeholder" />
<label>Drag to add a short text answer</label>
</div>
</div>
</div>
</div>
</aside>
<!-- Dynamic Answer List - List 2-->
<div class="input-answers" cdkDropList id="dynamicAnswerList"
(cdkDropListDropped)="dropIt($event)" [cdkDropListData]="dynamicAnswers">
<div class="input-section" cdkDragLockAxis="y" style="cursor: all-scroll" *ngFor="let answer of dynamicAnswers; index as i"
cdkDrag>
<div class="input-wrapper" *ngIf="answer.isInput || answer.isAddressSearch || answer.isAgeInput || answer.isVehicleVIN">
<input type="text" class="input-box normal-input-box" [(ngModel)]="answer.placeholderText"
placeholder="Add Text Placeholder" />
</div>
</div>
</div>
Вот мой файл form.component.ts
// Here is the original array which is then set to defaultAnswers
defaultAnswersOrigin: Answer[] = [
{isInput: true, placeholderText: "Enter Placeholder", hasPrefix: false, hasSuffix: false, prefixText: "", suffixText: "", width: "45", position: 0},
{isDatePicker: true, placeholderText: "Enter Date Placeholder", hasPrefix: false, hasSuffix: false, prefixText: "", suffixText: "", width: "45", position: 1},
{isSelect: true, placeholderText: "Enter Menu Placeholder", hasPrefix: false, hasSuffix: false, prefixText: "", suffixText: "", width: "45", position: 2},
{isTextarea: true, secondaryPlaceholderText: "Enter Text Placeholder", hasSecondaryPlaceholder: true, hasPrefix: false, hasSuffix: false, prefixText: "", suffixText: "", width: "45", position: 3},
{isCheckbox: true, displayValue: "", hasPrefix: false, hasSuffix: false, prefixText: "", suffixText: "", width: "45", position: 4},
{isButton: true, placeholderText: "", hasPrefix: false, hasSuffix: false, prefixText: "", suffixText: "", displayValue: "Enter Button Text", width: "45", position: 5},
{isPrevNextButtons: true, placeholderText: "", hasPrefix: false, hasSuffix: false, prefixText: "", suffixText: "", displayValue: "", width: "90", position: 6},
{isProgressButton: true, placeholderText: "", hasPrefix: false, hasSuffix: false, prefixText: "", suffixText: "", displayValue: "", width: "90", position: 7}
];
defaultAnswers = this.defaultAnswersOrigin;
answers: Answers = [];
// Drop it method used in html
dropIt(event: CdkDragDrop<string[]>) {
if (event.previousContainer !== event.container) {
transferArrayItem(this.defaultAnswers,
this.answers,
event.previousIndex,
event.currentIndex);
this.answers.forEach((answer, i) => {
answer.position = i;
});
this.resetList();
} else if (event.previousIndex !== event.currentIndex) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}
}
}
// Reset list method used
resetList() {
this.defaultAnswers = [];
setTimeout(() => {
this.defaultAnswers = this.defaultAnswersOrigin.slice();
}, 0);
}
Я ожидаю, что смогу перетащитьэлемент от L1 до L2 и успешно обновите его, используя ngModel.В этом конкретном сценарии использования я хочу изменить заполнитель, который является параметром в классе ответа.
В действительности происходит то, что Предмет из L1 и Новый Предмет из L2 обновляются так, как если бы они связывались с одним и тем же параметром.Поэтому я не могу обновить предмет из L2 без изменения L1.Если я также добавлю тот же элемент из L1 в L2 снова (что я могу сделать, потому что список сбрасывается), все три элемента (L1, L2 New и 2nd L2 New) будут обновляться с использованием ngModel.
******* ОБНОВЛЕНИЕ - ВОСПРОИЗВЕДЕННЫЙ STACKBLITZ Мне удалось воспроизвести ошибку в stackblitz.Возможно, вам придется обновить страницу, чтобы перетащить капля на работу.
Steps to reproduce:
1. go to url below
2. Drag a Short Text item from Default List into Dynamic List
3. Start changing the new items placeholder in Dynamic List
4. Notice how placeholder in reset Default list is changing as well
5. Add same item from Default list to Dynamic list again
6. Change placeholder of new item
7. Notice how all three placeholders change now
https://stackblitz.com/edit/cdk-drag-and-drop-q7qqvo