javascript - 如何将一个数组项传输到另一个数组并使用 Angular Material Drag n Drop CDK 更新它，而无需两个项目都绑定(bind)到相同的参数

Question

我正在使用 Angular Material Drag N Drop CDK 将一组默认项目(列表 1)移动到动态项目列表(列表 2)。当我将默认项目 (L1) 拖到动态项目 (L2) 中，然后更新现在的动态项目(New L2 Items)时，它也会更新默认项目(Old L1 Item)。

当您将默认项 (L1) 拖到动态项 (L2) 时，默认列表 (L1) 会使用 resetList 方法重置回其原始数组。我的目标是更新现在的动态项目(新 L2 项目)并可能将相同的默认项目(已重置的旧 L1 项目)拖到动态列表 (L2) 中，创建另一个新的动态项目(另一个新的 L2 项目)。我遇到的问题是，当我将默认项 (L1) 拖到动态列表 (L2) 中时，然后将新的动态项(使用 ngModel 的新 L2 项)更新为被拖动并重置的默认项(旧 L1 项)也有更新。

这是我在 form.component.html 中的 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);    
      }

我希望能够使用 ngModel 将项目从 L1 拖到 L2 并成功更新它。在这个特定的用例中，我想更改占位符，它是 Answer 类中的一个参数。

实际发生的是，来自 L1 的项目和来自 L2 的新项目都更新，就好像它们绑定(bind)到相同的参数一样。因此，我无法在不更改 L1 的情况下从 L2 更新项目。如果我再次将 L1 中的相同项目添加到 L2(我可以这样做，因为列表已重置)，所有三个项目(L1、L2 New 和第二个 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

Answer 1

您需要创建原始项目的副本，然后将副本添加到第二个列表。复制对象的方法有很多，但基本上是这样的:

function createCopy(orig){
   return  JSON.parse(JSON.stringify(orig))
}