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>

Это не работает, и я уверен, что у меня есть несколько синтаксических ошибок, но я не знаю, какие именно.

angular typescript svg

2

IIMaxII 24 Апр 2017 в 22:09

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

10

yurzui 24 Апр 2017 в 19:17

Answer 2

ПРОСТО ПРЕДЛОЖЕНИЕ

Другим решением будет использование модуля ngx-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, и передавать переменную цвета границы.

Помимо объекта svg line, вы также можете создавать различные объекты (эллипс, прямоугольник, ломаная линия, многоугольник и т. Д.) С помощью этой библиотеки.

3

Vdas Dorls 12 Мар 2018 в 14:43

Angular2 - NgFor с SVG

2 ответа

Похожие вопросы

Новые вопросы

angular