插值不反映Angular应用中的最新值

Question

dropzone1数组的元素仅反映初始的top，left值，不反映最新的top，left值。

在draw()功能我推top＆left值topLeft阵列，最后把它推到dropzone1阵列内move()的功能，初始top，left值被示出，但它不反映最新的电流top，left的值。

export class FloorZoneComponent {

    urlFloorZoneIn: any;
    roomsFloorZoneIn: any;
    existingDroppedItemZoneIn: any[] = [];
    @Input() urlFloorZone;
    @Input() roomsFloorZone;
    @Input() currentBoxFloorZone;
    @Input() existingDroppedItem: any[] = [];
    dropzone1 = [];
    currentBox?: string = this.currentBoxFloorZone;
    mouse = {
        x: null,
        y: null,
        down: false
      };
    will_draw = false;
    left;
    top;
    topLeft = [];

    @ViewChild('parentparent') parentparent;

    @HostListener('mousedown', ['$event'])
    onMousedown(event) {
        this.mouse.down = true;
    }

    @HostListener('mouseup', ['$event'])
    onMouseup(event) {
        this.mouse.down = false;
    }

    documentMouseMove(e: MouseEvent) {
        // move logic
        if(!this.mouse.down) { return; }

        const container_rect = this.parentparent.nativeElement.getBoundingClientRect();
        this.mouse.x = e.clientX - container_rect.left;
        this.mouse.y = e.clientY - container_rect.top;
        if(!this.will_draw) {
          requestAnimationFrame(this.draw.bind(this));
          this.will_draw = true;
        }

    }

    draw() {
        this.will_draw = false;
        const { width, height} = this.parentparent.nativeElement.getBoundingClientRect();
        const perc_x = this.mouse.x / width * 100;
        const perc_y = this.mouse.y / height * 100;
        // -5 to center (elem has its width set to 10%)
        console.log('left', (perc_x - 5) + '%');
        this.left = perc_x - 5;
        this.topLeft = []
        this.topLeft.push(this.left);
        // -5 to center (elem has its height set to 10%)
        console.log('top', (perc_y - 5) + '%');
        this.top = perc_y - 5;
        this.topLeft.push(this.top)
    }

    ngOnChanges(changes: SimpleChanges) {
        if (changes.urlFloorZone && changes.urlFloorZone.currentValue) {
            this.urlFloorZoneIn = changes.urlFloorZone.currentValue;
        }
        if (changes.roomsFloorZone && changes.roomsFloorZone.currentValue) {
            this.roomsFloorZoneIn = changes.roomsFloorZone.currentValue
        }
        if(changes.existingDroppedItem && changes.existingDroppedItem.currentValue){
            this.existingDroppedItemZoneIn = changes.existingDroppedItem.currentValue;
        }        
    }


    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);
        toList.push(objTemp);

    }

    removeBox(item: string, list) {
            if (list.indexOf(item) !== -1) {
                list.splice(list.indexOf(item), 1);
            }

    }

    }

我通话move()功能和推动名和top，left值dropzone1数组

<div (mousemove)="documentMouseMove($event)" #parentparent>

  <div class="dropzone" 
       (drop)="move(currentBox, dropzone1)">

  <div class="box"
       *ngFor="let existingZone of existingDroppedItemZoneIn">
    {{ existingZone.dis }}
    <span style="display: none">{{existingZone.left}}</span>
    <span style="display: none">{{existingZone.top}}</span>
   </div>

    <div class="box"
         *ngFor="let box of dropzone1" 
         (dragStart)="currentBox = box">
    {{ box.dis.dis }}
     <span style="display: none">{{box.pos[1]}}</span>
     <span style="display: none">{{box.pos[0]}}</span>
    </div>

</div>
</div>

我也可以登录最新top，left从价值在控制台draw() 的功能，但该*ngFor元素不反映最新的一个

更新1

添加stackblitz链接

在此链接问题中，这里是hello.component，我在其中分配top和left值，in draw()和move()函数。

现在，我已经提供了静态数组的框值app.component，然后将其推入dropzone1存在问题的hello.component中的数组。

更新2

我想我已经解决了这个问题，但是如果有人建议的话该如何解决。

因此，每当放一个新盒子时，该move()函数就会被调用

(drop)="move(currentBox, dropzone1)"

从其中top，left值被推到框属性和插值到视图。现在top，left值从何处进入，它们来topleft自由draw()函数创建的数组。

因此，最初的top，left价值被插入。但当相同的元素被再次拖则仅draw()函数被调用和top，left计算值，但没有得到推，因为move()当新的元素被删除功能只调用。

因此，如何将插值数据绑定到从draw()函数计算得出的top，left的最新值。请提出建议。

Answer 1

发生这种情况是因为move()仅当将块从 Gray区域之外移动时才调用your，但是draw()所有鼠标移动都调用了your 。

currentBox选择并移动位置时，您需要更新位置。

  draw() {
    const movingBlockIndex = (this.dropzone1.indexOf(this.currentBox));
    if (movingBlockIndex > -1) {
      this.will_draw = false;
      const { width, height } = this.parentparent.nativeElement.getBoundingClientRect();
      const perc_x = this.mouse.x / width * 100;
      const perc_y = this.mouse.y / height * 100;
      // -5 to center (elem has its width set to 10%)
      // console.log('left', (perc_x - 5) + '%');
      this.left = perc_x - 5;
      this.topLeft = []
      this.topLeft.push(this.left);
      // -5 to center (elem has its height set to 10%)
      // console.log('top', (perc_y - 5) + '%');
      this.top = perc_y - 5;
      this.topLeft.push(this.top)
      this.dropzone1[movingBlockIndex].pos[0] = (perc_x - 5);
      this.dropzone1[movingBlockIndex].pos[1] = (perc_y - 5);
    }
  }