Angular2-带SVG的NgFor

我有一个SVG元素，我想用ngFor绘制它。SVG仅由行组成，因此理论上应该是可行的。 我目前拥有以下代码：

my-component.js：

从'angular2/core'导入{Component}；
@组成部分({
选择器：“我的组件”，
templateUrl:'my component.html'
})
导出类MyComponent{
线路：[
{重量：0.4，x1:86.69，y1:1，x2:98.91，y2:1}，
{重量：0.5，x1:85.31，y1:9.67，x2:98.23，y2:9.67}
]
}

我的组件html：

---

它不起作用，我确信我有多处语法错误，但我不知道到底是哪一处错误。

你不应该混合绑定和插值。试试这个：

<svg id="lines" viewBox="0 0 320.6 542.59" >
  <line *ngFor="let line of lines" class="line" [attr.x1]="line.x1" [attr.y1]="line.y1" [attr.x2]="line.x2" [attr.y2]="line.y2"/>
</svg>

---

只是一个建议

另一个解决方案是使用，这将允许轻松生成SVG对象。要复制上述代码，您必须包含模块，然后在视图中使用-

<svg-container containerId="lineContainer">
  <svg-line *ngFor="let line of lines" [borderSize]="line.weight" [x0]="line.x1" [y0]="line.y1" [x1]="line.x2" [y2]="line.y2"></svg-line>
</svg-container>

除上述参数外，您还可以侦听多个事件，如onClick、onMouseOver、onMouseOut、onDoubleClick，并传递border color变量

---

除了line svg对象之外，您还可以使用该库创建不同的对象（椭圆、矩形、多段线、多边形等）。

非常有效，非常感谢！将在4分钟结束后立即接受。

<svg-container containerId="lineContainer">
  <svg-line *ngFor="let line of lines" [borderSize]="line.weight" [x0]="line.x1" [y0]="line.y1" [x1]="line.x2" [y2]="line.y2"></svg-line>
</svg-container>