插值将应用于所有ngfor元素的span文本内容 [英] The interpolated values get applied to the span text content of all ngfor elements

问题描述

我要检索已移动元素的上下值并将其显示在元素内， 问题是当前移动元素的顶部，左侧值修改了所有元素的跨度文本顶部，左侧.

I am retrieving the moved element top and left values and displaying it within the element, the issue is the top, left values of the current moved element modifies the span text top,left of all the elements.

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

Note : It modifies the span text(top,left values) of all the elements which I dont want . The top,left positions per say of element are correct that is not getting affected.

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

第1块应在其跨度文本中显示其相应的顶部，左侧，而第2块应在其跨度文本中显示其相应的顶部，左侧，依此类推

Block 1 should show in its span text its respective top,left and Block 2 should show in its span text its respective top,left and so on

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

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

推荐答案

问题是您要绑定到整个页面范围内的属性.

The problem is that you are binding to a property that is for the entire scope of the page.

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

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

Instead, I'd make existingDroppedItemZoneIn a type with properties:

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

然后您要绑定到每个框的属性:

And then you would want to bind to each box's attributes:

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

这是一个快速的伪代码示例.因此它可能并不完美.

And this is a quick pseudo-code example. So it likely isn't perfect.

这篇关于插值将应用于所有ngfor元素的span文本内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！