在agular2

Question

我试图在Angular2中创建一个移动的圆圈，除了CSS之外，所有看起来都很好，因为你可以看到我将一个具有2个CSS属性的对象传递到[ngStyle]并且它没有＆＃39; t实现<div>位置，直到我到达浏览器的左边界或上边界，当我这样做时，我的<div>只是＆＃34;跳跃＆＃34;并坚持浏览器边框。当我将坐标记录到控制台时，它可以正常工作。我无法找到[ngStyle]是否连续刷新或仅在特定情况下刷新。有人可以帮我解决这个问题吗？

＆＃13;

＆＃13;

import { Component } from '@angular/core';
import { Observable } from 'rxjs';


@Component({
  selector: 'app-circle',
  template: `
  <div [ngStyle]="currentStyles" id="circle" ></div>
  `,
  styleUrls: ['./circle.component.css']
})
export class CircleComponent {
 
 currentStyles = {left: 50, top: 50};
 source: any = Observable.fromEvent(document, "mousemove")
                 .map((e: MouseEvent) =>
                 { return { x: e.clientX, y: e.clientY }})
                 .subscribe(cor => 
                 { this.currentStyles.left = cor.x,
                   this.currentStyles.top = cor.y});
}

＆＃13;

＆＃13;

＆＃13;