2017-04-24 78 views
0

我有一個SVG元素,我想用ngFor繪製。 SVG只包含行,所以理論上應該是可行的。 目前,我有以下代碼:Angular2 - 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> 

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

回答

3

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

<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 } 
    ]; 
} 
+0

完美的作品,非常感謝!只要4分鐘結束就會接受。 – IIMaxII