单击函数未触发移动div

Question

我有一个div正在移动，因为我每20毫秒改变一次位置。但是当我点击那个div时，与之关联的函数不起作用。我想知道这是否与div位置的变化有关。

<div class="box-position" 
  [style.top.px]="box.top" 
  [style.left.px]="box.left"
  (click)="onTarget(box)"></div>

ngOnit(){
  //the observable events occurs each 20ms
  this.service.subscribe(data => this.box = data)
}

onTarget(box){
  console.log("clicked")
}

以下是live code

Answer 1

在您的示例中，使用ngFor结构指令并更改对数组中元素的引用。因此，每次更改引用时，angular会破坏并重新创建DOM。

这意味着你无法使click事件工作，因为你破坏了侦听click事件的元素。

有不同的解决方案可以阻止重建DOM：

1）使用ngForTrackBy输入

<强> HTML

<ng-template ngFor ... [ngForTrackBy]="trackByFn">

<强>组件

trackByFn(i: number) {
   return i;
}

<强> Example

2）变异对象

boxes: any[]=[{ left: 0, top: 120}];
...

this.boxes[0].left = move++ % 700;

<强> Example