带有cdk CdkDragDrop

Question

我仍在学习，并且正处于旅程的开始... 目前，我正在实验cdkDragDrop，我想使用其下一个按钮创建元素以更改元素，这是我所做的

我已经尝试了许多不同的方法，但是现在，如果用户将我想将id更改为新元素的元素拖动到每个元素上，我将在每个元素上分配一个ID，以便稍后识别该元素。

我从Jason文件中获取数据...目前，我已经拆分了文件，但这对我没有帮助

问题是test()，当我enter code here单击按钮时，原始元素和新元素都会更改，但我只想更改新元素。

示例： https://stackblitz.com/edit/angular-yr8ej6

test.component.ts

import { Component} from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem, copyArrayItem } from '@angular/cdk/drag-drop';
import { Element } from './shared/Elements.model';
import {ElementUser} from './shared/ElementsUser.model';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

export class TestComponent {

  //counter for testing
  count_footer = 0;


  trackss: Element[] = require('./shared/data.json');
  tracks = this.trackss[0];
  usertrackss: ElementUser[] = require('./shared/userdata.json');
  usertracks = this.usertrackss[0];

  onTalkDrop(event: CdkDragDrop<Element[]>) {

    if (event.previousContainer !== event.container){
      console.log("trackss before")
      console.log(this.trackss);
      copyArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
      console.log("trackss after")
      console.log(this.trackss);
      console.log("usertracksstrackss after")
      console.log(this.usertrackss);
    }
    else{
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );

    }
  }
  test(){

    this.usertracks.tasks[0].id = 50;
    console.log("this.usertracks")
    console.log(this.usertracks);
    console.log("this.tracks")
    console.log(this.tracks);

    return null;
  }
}

test.component.html

<style>
  .item {
      height: 100px;
      width: 100%;
      border: 1px solid green;
      display: inline-flex;
      justify-content: center;
      align-items: center;
  }
</style>

<div style="display:flex;">
  <div cdkDropList
  [cdkDropListData]="tracks.tasks"
  (cdkDropListDropped)=onTalkDrop($event)
  [cdkDropListConnectedTo]="otherList"
  #firstList="cdkDropList"
  style="width: 50%; border: solid red 1px;">
      <!--<app-nav cdkDrag class="item" ></app-nav>
      <app-home cdkDrag class="item" ></app-home>-->
      <div style="padding: 12px" *ngFor="let task of tracks.tasks" cdkDrag>


        <h2>{{task.id}}</h2>
        <div  (keydown.ArrowRight)="NextElement(task.id)" (keydown.ArrowLeft)="PreviusElement(task.id)">
          <div (click)="NextElement(task.id)" [innerHTML]="task.element_current"></div>
          <!--<button (click)="NextElement(task.id)">Nächstes</button>
          <button (click)="PreviusElement(task.id)">Zurück</button>-->
        </div>
    </div>

  </div>
  <div cdkDropList
  [cdkDropListData]="usertracks.tasks"
  (cdkDropListDropped)=onTalkDrop($event)
  [cdkDropListConnectedTo]="firstList"
  #otherList="cdkDropList"
  style="width: 50%; border: solid blue 1px;">
            <div style="padding: 12px" *ngFor="let task of usertracks.tasks" cdkDrag>


              <h2>{{task.id}}</h2>
              <div (keydown.ArrowRight)="NextElement(task.id)" (keydown.ArrowLeft)="PreviusElement(task.id)">
                <div (click)="NextElement(task.id)" [innerHTML]="task.element_current"></div>
                <button (click)="NextElement(task.id)">Nächstes</button>
                <button (click)="PreviusElement(task.id)">Zurück</button>
              </div>
          </div>
  </div>

</div>

<button (click)="test()">test</button>

Elements.model.ts

export interface Element {
    title: string;
    id: string;
    tasks: items[];
  }

  export interface items {
    title: string;
    element_current: string;
    count: number;
    id: number;
    id_orig: number;
    elements: items2 [];
  }

  export interface items2 {
    e0: string;
  }

data.json

[
  {
    "title": "RootList",
    "id": "rootList",
    "tasks": [
      {
        "element_current": "<p>element_current0</p>",
        "count": -1,
        "id": 200,
        "id_orig": -1,
        "title": "nix",
        "elements": [
          {"e0": "demo0_id0"},
          {"e0": "demo1_id0"},
          {"e0": "demo2_id0"},
          {"e0": "demo3_id0"},
          {"e0": "<h1>ENDE</h1>"}
        ]
      },{
        "element_current": "<p>element_current1</p>",
        "count": -1,
        "id": 300,
        "id_orig": -1,
        "title": "nix",
        "elements": [
          {"e0": "demo0_id1"},
          {"e0": "demo1_id1"},
          {"e0": "demo2_id1"},
          {"e0": "<h1>ENDE</h1>"}
        ]
      }
    ]
  },
  {
    "title": "UserList",
    "id": "userList",
    "tasks": [
    ]
  }
]

预期结果是测试按钮仅更改array [0]上的新元素。

实际结果：该按钮更改了原始元素和新元素。

Answer 1

CDKcopy为每个项目使用一个参考...解决方案是制作一个深拷贝：

import {cloneDeep} from 'lodash';

onTalkDrop(event: CdkDragDrop<Element[]>) {
  if (event.previousContainer !== event.container){
    // Clone the item that was dropped.
    const clone = cloneDeep(event.previousContainer.data[event.previousIndex]);

    // Add the clone to the new array.
    event.container.data.splice(event.currentIndex, 0, clone);
  }
  else{
    moveItemInArray(
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  }
}