现在我有这个盒子,其中的事件具有这个盒子的位置值,我想更新并打印每个盒子的位置的每个值
这是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}