Question

我有一个工作示例，演示了元素放入并显示在顶部，左侧的值的情况。我还实现了删除项目的删除（删除），并将其在现有块之间来回移动。但是，我遇到了一些小问题。

在将顶部已存在的框（existingDroppedItemZoneIn数组）移动到顶部时，左侧值未绑定，我无法弄清楚如何绑定它们（尽管它与另一个* ngFor相似）。

从灰色区域中删除该框后，当我再次将其放回灰色区域时，它显示了先前保留的顶部，最初不应该保留的左值。

此外，在移动现有框（existingDroppedItemZoneIn数组框）时，也开始更改从外部放置的框（绑定到dropzone1数组的框）的顶部和左侧值

注意：请单击ToGetExistingItem按钮以查看现有框以及已经存在的框，然后可以重现上述问题。

move(box: string, toList: string[]): void { 
    box = this.currentBoxFloorZone;
    let objTemp:any = {
        pos:[]
      };
    objTemp.dis = this.currentBoxFloorZone;
    for(var i=0; i < this.topLeft.length; i++){
        objTemp.pos.push(this.topLeft[i]);
    } 
    //this.removeBox(box, this.dropzone1);
    this.removeBox(box,this.roomsFloorZoneIn);
    toList.push(objTemp);   
}

removeBox(item: string, list, flag:boolean = false) {
        if (list.indexOf(item) !== -1) {
            list.splice(list.indexOf(item), 1);
        }
        if(flag){
            console.log("wassupppp");
            this.roomsFloorZoneIn.push(item);
        }

}

hello.component.html

 <div id="toget"
      class="dropzone"
      [ngStyle]="{'position': 'relative'}"
      appMovableArea 
      appDropzone
     (drop)="move(currentBox, dropzone1)">

 <div class="box"
      appMovable
      *ngFor="let existingZone of existingDroppedItemZoneIn"
      [ngStyle] = "{'position': 'absolute', 
       'top.%':existingZone.spans[1], 'left.%':existingZone.spans[0]}">

         {{ existingZone.main }}

    <span style="display: none">{{existingZone.spans[0]}}</span>
    <span style="display: none">{{existingZone.spans[1]}}</span>
    <span(click)="removeBox(existingZone,existingDroppedItemZoneIn,true)">
        x
    </span>

 </div>

 <div class="box" *ngFor="let box of dropzone1" appDroppable 
 (dragStart)="currentBox = box" appMovable>

    {{ box.dis.dis }}

    <span style="display: none">{{box.pos[0]}}</span>
    <span style="display: none">{{box.pos[1]}}</span>
    <span (click)="removeBox(box,dropzone1,true)">x</span>

 </div>

</div>
</div>

app.component.html

 <hello
  [urlFloorZone]='url'
  [roomsFloorZone]='zonesToBepassed' 
  [currentBoxFloorZone]='currentBox'
  [existingDroppedItem] = 'droppeditem'
  (floorToParent)="updateFloorRooms($event)>
 </hello>

app.component

updateFloorRooms(e){
   this.rooms.push(e.dis)
}

stackblitz出现实际问题

Answer 1

您提出的问题不止一个，我已经解决了几个问题，但是您需要自己动手才能使其正常工作。

点击ToGetExistingItem按钮，然后点击try this demo：

将块304，305，306的外部拖入灰色框。它将更改值
尝试移动其他已添加301，302的块。最近添加的块的值不会改变。
您的existingDroppedItemZoneIn中的obj未添加到dropzone1中。这就是为什么 const movingBlockIndex = (this.dropzone1.indexOf(this.currentBox)); 正在给-1。并且因此坐标不会被计算。这就是为什么您没有在那些块中获得位置值的原因。

我已添加

 (dragStart)="currentBox = existingZone"

并将this.will_draw移动到if块之前。

  draw() {
    const movingBlockIndex = (this.dropzone1.indexOf(this.currentBox));
    this.will_draw = false;
    if (movingBlockIndex > -1) {
    .......... and so on

将插值数据绑定到数组的现有元素

1 个答案: