I want to use ngFor to draw an SVG Element that consists of lines. I am struggling with the implementation and need some help fixing the code. Here is what I have so far:
my-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 }
]
}
my-component-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>
There are some syntax errors in my code, causing it not to work properly. I need help in identifying and correcting these mistakes.