функция щелчка не сработала для перемещения 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")
}

Вот живой код

Answer 1

В вашем примере используйте структурную директиву ngFor и измените ссылку на элемент в массиве. Таким образом, angular разрушает и воссоздает DOM каждый раз, когда вы меняете ссылку.

Это означает, что вы не можете заставить работать событие click, потому что уничтожаете элемент, который прослушивает событие click.

Существуют различные решения, которые могут помешать восстановлению DOM:

1) Использовать ngForTrackBy вход

HTML

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

компонент

trackByFn(i: number) {
   return i;
}

* ** 1027 тысячи двадцать-шести * * Пример 1 028 ** +1029 *

2) Мутировать объект

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

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

Пример * ** 1039 тысяча тридцать восемь *