javascript - 插值不反射(reflect) Angular 应用程序中的最新值

Question

dropzone1数组的元素只反射(reflect)初始的top,left值，不反射(reflect)最新的top,left值。

在 draw() 函数中，我将 top 和 left 值推送到 topLeft 数组，最后将其推送到move() 函数中的 dropzone1 数组，显示了初始的 top 和 left 值，但不反射(reflect)当前最新的 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() 函数并将 name 和 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>

我还可以从 draw() 函数中记录最新的 top , left 值，但是 *ngFor 元素不反射(reflect)最新的

更新 1

添加stackblitz link

在此链接中，问题在 hello.component 中，我在 draw() 和 move() 函数中分配 top,left values。

目前，我已经在 app.component 中提供了来自静态数组的框值，这些值又被推送到存在于 hello.component 中的 dropzone1 数组，问题所在。

更新2

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

所以每当一个新盒子被放下时，move() 函数就会被调用

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

top、left 值被推送到框属性并插入到 View 中。现在从 top 和 left 值进来的地方，它们来自从 draw() 创建的 topleft 数组功能。

所以初始的 top,left 值被插值。但是当再次拖动相同的元素时，只有 draw() 函数被调用和 top ， left 值被计算但不会被推送，因为 move() 函数仅在新元素被删除时被调用。

那么如何将插值数据绑定(bind)到 top,left 的最新值，这些值是从 draw() 函数计算得出的。请提出建议。

Answer 1

发生这种情况是因为您的 move() 仅在 block 从 灰色区域 之外移动时被调用，而 draw()调用所有鼠标移动。

当 currentBox 被选中并四处移动时，您需要更新它的位置。

Working demo

  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);
    }
  }