Angular2 - NgFor使用SVG

Question

我有一個SVG元素，我想用ngFor繪製。 SVG只包含行，所以理論上應該是可行的。 目前，我有以下代碼：

我-component.js：

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-component', 
    templateUrl: 'my-component.html' 
}) 

export class MyComponent{ 
    lines: [ 
    { weight: 0.4, x1: 86.69, y1: 1, x2: 98.91, y2: 1 }, 
    { weight: 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" *ngFor='line of lines'> 
    <line class="line" [attr.x1]="{{ x1 }}" [attr.y1]="{{ y1 }}" [attr.x2]="{{ x2 }}" [attr.y2]="{{ y2 }}"/> 
</svg> 

它不工作，我相信我有多個語法錯誤，但我不知道哪些錯誤。

Answer 1

你不應該混合綁定和插值。試試這個：

<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> 

而在你的組件也改變:到=

export class MyComponent{ 
    lines = [ // here 
    { weight: 0.4, x1: 86.69, y1: 1, x2: 98.91, y2: 1 }, 
    { weight: 0.5, x1: 85.31, y1: 9.67, x2: 98.23, y2: 9.67 } 
    ]; 
}