javascript - 插值将应用于所有 ngfor 元素的范围文本内容

Question

我正在检索移动的元素顶部和左侧值并将其显示在元素内， 问题是当前移动元素的顶部、左侧值修改了所有元素的范围文本顶部、左侧。

注意:它修改了我不想要的所有元素的跨度文本(顶部、左侧值)。每个元素的顶部、左侧位置都是正确的，不会受到影响。

html

<div (mousemove)="documentMouseMove($event)" #parentparent>
<div id="toget" class="dropzone">

<div class="box"
     *ngFor="let existingZone of existingDroppedItemZoneIn">
       {{ existingZone }}
  <span>{{left}}</span>
  <span>{{top}}</span>
</div>

<div class="box"
     *ngFor="let box of dropzone1">
    {{ box.dis }}
  <span>{{left}}</span>
  <span>{{top}}</span>
</div>

</div>
</div>

ts代码

export class abcComponent {

urlFloorZoneIn: any;
roomsFloorZoneIn: any;
existingDroppedItemZoneIn: any[] = [];
@Input() urlFloorZone;
@Input() roomsFloorZone;
@Input() currentBoxFloorZone;
@Input() existingDroppedItem: any[] = [];

mouse = {
    x: null,
    y: null,
    down: false
  };
will_draw = false;
left;
top;
dropzone1 = [];
currentBox?: string = this.currentBoxFloorZone;

constructor(private dataService: DataService, private elRef: ElementRef) {
}


@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();
    // relative to container, in px
    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 - 7;
    // -5 to center (elem has its height set to 10%)
    console.log('top', (perc_y - 5) + '%');
    this.top = perc_y - 7;
}

ngOnInit() {}

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

block 1 应在其跨度文本中显示其各自的顶部、左侧， block 2 应在其跨度文本中显示其各自的顶部、左侧等

    ______________      ______________
    |            |      |            |
    |   1        |      |     2      |
    |  32.77 4.6 |      |   32.77 4.6|
    --------------      --------------

                  ______________
                  |            |
                  |      3     | 
                  |   32.77 4.6|
                  |____________|

Answer 1

问题在于您正在绑定(bind)到适用于整个页面范围的属性。

<span>{{left}}</span>

相反，我会将 existingDroppedItemZoneIn 设为具有以下属性的类型:

existingDroppedItemZoneIn[]: DropBox[] = new {[
   {left:0, top:0},
   {left:20, top: 0}
]};

然后您需要绑定(bind)到每个框的属性:

<div class="box" *ngFor="let box of dropzone1">
   {{ box.dis }}
   <span>{{box.left}}</span>
   <span>{{box.top}}</span>
</div>

这是一个快速的伪代码示例。所以它可能并不完美。