Question

我试图将Observable绑定到SVG元素

<svg width="500px" height="500px">
  <circle *ngFor="let point of points2 | async"
    [attr.cx]="point.x" 
    [attr.cy]="point.y"
    r=20 stroke="black" stroke-width="2" fill="#0080ff" />
</svg>

其中points2定义为

this.points2 = Observable.from([
  [{ x: 250, y: 50 },  {x: 200, y: 100 }]
]);

实际上有效。但是，以下示例不会：

<svg width="500px" height="500px">
  <circle *ngFor="let point of points1 | async"
    [attr.cx]="point.x" 
    [attr.cy]="point.y"
    r=20 stroke="black" stroke-width="2" fill="#0080ff" />
</svg>

（与之前相同，只是不同的变量名称）points1

this.points1 = new Subject<IPoint[]>();
this.getCoords();

和

getCoords() {
  let delay = 1000;

  setTimeout(() => {
    this.points1.next([{ x: 50, y: 50)}, { x: 100, y: 100 }]);
    this.points1.complete();
  }, delay);
}

由于＆＃34;没有工作＆＃34;我的意思是这些点根本不显示（plunkr显示问题）。在我的生产应用程序中，它们会显示出来，但即使值看起来非常好，它们也会卡在(0, 0)。所以我似乎在这里遗漏了一些东西。

如何让它发挥作用？

Answer 1

错误的地方有一个)！

this.points1.next([{ x: 50, y: 50)<<<<<<<<<<<!!!!}, { x: 100, y: 100 }]);

将SVG属性绑定到Angular 2中的RxJS.Observable

1 个答案: