使用角度4的每个事件的事件值更新数组参数

时间:2019-01-08 23:10:41

标签: angular typescript

现在我有这个盒子,其中的事件具有这个盒子的位置值,我想更新并打印每个盒子的位置的每个值
这是box事件,例如{x:0,y:0}

        <button type="button" class="btn btn-success  m-2" (click)="toggleBox()">box</button>  
    <div  *ngFor="let i of Arr(num)"   ngResizable
             rzHandles="n,s,e,w,se,sw"
             ngDraggable
             [bounds]="dragBounds"
             [inBounds]="true"
             class="box" (movingOffset)="onMovingbox($event)" [preventDefaultEvent]="true">
        {{i}}</div> 

<div  *ngFor="let i of Arr(num); let g = index" >
        movingOffset of box {{g+1}}: {{'{'}} x: {{this.movingOffsetbox.x}}, y: {{this.movingOffsetbox.y}} {{'}'}}
      </div> 

代码就是这样

export class ContainComponent implements OnInit {
 Arr = Array;
  num: Number = 0;
  movingOffsetbox = [];

  constructor() {
  }

  ngOnInit() {
  }

  toggleBox() {
    this.showBox = true;
    this.num++;
    this.movingOffsetbox.push({x: 0, y: 0})
  }

  toggleCircle() {
    this.showCirc = !this.showCirc;
  }

  onMovingbox(event) {
this.movingOffsetbox.x= event.x
  this.movingOffsetbox.y= event.y

    console.log(event)
  }

演示:: https://stackblitz.com/edit/angular-2d8hqs
-updare我知道了,我必须将带有事件的索引传递给(movingOffsetbox)数组的索引 像这样

<div  *ngFor="let i of Arr(num)"   ngResizable
             rzHandles="n,s,e,w,se,sw"
             ngDraggable
             [bounds]="dragBounds"
             [inBounds]="true"
             class="box" (movingOffset)="onMovingbox($event,index)" [preventDefaultEvent]="true">
        {{i}}</div>
 onMovingbox(event, index) {
    this.movingOffsetbox[index].x= event.x}

0 个答案:

没有答案