Как динамически визуализировать SVG с помощью ngFor в Angular 4 - PullRequest
Новая
       19

Как динамически визуализировать SVG с помощью ngFor в Angular 4

0 голосов
/ 14 июня 2019

У меня есть список координат. Я хочу динамически визуализировать изображение SVG в угловых 4. Я получаю ошибку ниже. пожалуйста, помогите мне решить.

HTML 

 <svg height="100%" width="100%" (click)="addTag($event)" *ngFor="let drawLine of drawLineList">
        <circle appTagDraggable [cx]="drawLine.x1" [cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="onCricleDragStart($event)" (dragMove)="onCricleDragMove($event)" (dragEnd)="onCricleDragEnd($event)" />
        <line [x1]="drawLine.x1" [y1]="drawLine.y1" [x2]="drawLine.x2" [y2]="drawLine.y2" style="stroke:rgb(255,0,0);stroke-width:2;stroke-dasharray: 5,3" />
        <circle appTagDraggable [cx]="drawLine.x1" [cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="onCricleDragStart($event)" (dragMove)="onCricleDragMove($event)" (dragEnd)="onCricleDragEnd($event)" />
 </svg>

core.js: 1449 ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: Ошибки синтаксического анализа шаблона: Невозможно связать с 'cx', так как это не известное свойство ': svg: circle'. ("click) =" addTag ($ event) "* ngFor =" let drawLine of drawLineList "> ] [cx] = "drawLine.x1" [cy] = "drawLine.y1" r = "5" stroke = "black" stroke-width = "3" fill = "red" (dragStart) = "o"): нг: ///GlobalSettingsModule/ImageCaptureComponent.html@251: 36 Невозможно связать с 'cy', поскольку оно не является известным свойством ': svg: circle'. ("nt)" * ngFor = "let drawLine of drawLineList"> ] [cy] = "drawLine.y1" r = "5" stroke = "black" stroke-width = "3" fill = "red" (dragStart) = "onCricleDragStart ($ e"): ng: /// GlobalSettingsModule /ImageCaptureComponent.html@251:55 Невозможно связать с 'x1', поскольку оно не является известным свойством ': svg: line'. ("t)" (dragMove) = "onCricleDragMove ($ event)" (dragEnd) = "onCricleDragEnd ($ event)" /> ] [x1] = "drawLine.x1" [y1] = "drawLine.y1" [x2] = "drawLine.x2" [y2] = "drawLine.y2" style = "обводка: rgb (255,0,0" ): ng: ///GlobalSettingsModule/ImageCaptureComponent.html@252: 18 Невозможно связать с 'y1', поскольку оно не является известным свойством ': svg: line'. ("ricleDragMove ($ event)" (dragEnd) = "onCricleDragEnd ($ event)" /> ] [y1] = "drawLine.y1" [x2] = "drawLine.x2" [y2] = "drawLine.y2" style = "stroke: rgb (255,0,0); ширина хода: 2; st" ): ng: ///GlobalSettingsModule/ImageCaptureComponent.html@252: 37 Невозможно связать с 'x2', поскольку оно не является известным свойством ': svg: line'. ("t)" (dragEnd) = "onCricleDragEnd ($ event)" /> ] [x2] = "drawLine.x2" [y2] = "drawLine.y2" style = "обводка: rgb (255,0,0); ширина обводки: 2; штрих-черта: 5,3"): нг : ///GlobalSettingsModule/ImageCaptureComponent.html@252: 56 Невозможно связать с 'y2', поскольку оно не является известным свойством ': svg: line'. ("icleDragEnd ($ event)" /> ] [y2] = "drawLine.y2" style = "обводка: rgb (255,0,0); ширина обводки: 2; штрих-черта: 5,3" /> <"): ng: ///GlobalSettingsModule/ImageCaptureComponent.html@252: 75 Невозможно связать с 'cx', так как это не известное свойство ': svg: circle'. ("=" ход: rgb (255,0,0); ширина хода: 2; штрих-штрих: 5,3 "/> ] [cx] = "drawLine.x1" [cy] = "drawLine.y1" r = "5" stroke = "black" stroke-width = "3" fill = "red" (dragStart) = "o"): нг: ///GlobalSettingsModule/ImageCaptureComponent.html@253: 36 Невозможно связать с 'cy', поскольку оно не является известным свойством ': svg: circle'. ("0); ширина штриха: 2; штрих-штриха: 5,3" /> ] [cy] = "drawLine.y1" r = "5" stroke = "black" stroke-width = "3" fill = "red" (dragStart) = "onCricleDragStart ($ e"): ng: /// GlobalSettingsModule /ImageCaptureComponent.html@253:55 Ошибка: ошибки разбора шаблона: Невозможно связать с 'cx', так как это не известное свойство ': svg: circle'. ("click) =" addTag ($ event) "* ngFor =" let drawLine of drawLineList "> ] [cx] = "drawLine.x1" [cy] = "drawLine.y1" r = "5" stroke = "black" stroke-width = "3" fill = "red" (dragStart) = "o"): нг: ///GlobalSettingsModule/ImageCaptureComponent.html@251: 36 Невозможно связать с 'cy', поскольку оно не является известным свойством ': svg: circle'. ("nt)" * ngFor = "let drawLine of drawLineList"> ] [cy] = "drawLine.y1" r = "5" stroke = "black" stroke-width = "3" fill = "red" (dragStart) = "onCricleDragStart ($ e"): ng: /// GlobalSettingsModule /ImageCaptureComponent.html@251:55 Невозможно связать с 'x1', поскольку оно не является известным свойством ': svg: line'. ("t)" (dragMove) = "onCricleDragMove ($ event)" (dragEnd) = "onCricleDragEnd ($ event)" /> ] [x1] = "drawLine.x1" [y1] = "drawLine.y1" [x2] = "drawLine.x2" [y2] = "drawLine.y2" style = "обводка: rgb (255,0,0" ): ng: ///GlobalSettingsModule/ImageCaptureComponent.html@252: 18 Невозможно связать с 'y1', поскольку оно не является известным свойством ': svg: line'. ("ricleDragMove ($ event)" (dragEnd) = "onCricleDragEnd ($ event)" /> ] [y1] = "drawLine.y1" [x2] = "drawLine.x2" [y2] = "drawLine.y2" style = "stroke: rgb (255,0,0); ширина хода: 2; st" ): ng: ///GlobalSettingsModule/ImageCaptureComponent.html@252: 37Невозможно связать с 'x2', поскольку оно не является известным свойством ': svg: line'. ("t)" (dragEnd) = "onCricleDragEnd ($ event)" /> ] [x2] = "drawLine.x2" [y2] = "drawLine.y2" style = "обводка: rgb (255,0,0); ширина обводки: 2; штрих-черта: 5,3"): нг : ///GlobalSettingsModule/ImageCaptureComponent.html@252: 56 Невозможно связать с 'y2', поскольку оно не является известным свойством ': svg: line'. ("icleDragEnd ($ event)" /> ] [y2] = "drawLine.y2" style = "обводка: rgb (255,0,0); ширина обводки: 2; штрих-черта: 5,3" /> <"): ng: ///GlobalSettingsModule/ImageCaptureComponent.html@252: 75 Невозможно связать с 'cx', так как это не известное свойство ': svg: circle'. ("=" ход: rgb (255,0,0); ширина хода: 2; штрих-штрих: 5,3 "/> ] [cx] = "drawLine.x1" [cy] = "drawLine.y1" r = "5" stroke = "black" stroke-width = "3" fill = "red" (dragStart) = "o"): нг: ///GlobalSettingsModule/ImageCaptureComponent.html@253: 36 Невозможно связать с 'cy', поскольку оно не является известным свойством ': svg: circle'. ("0); ширина штриха: 2; штрих-штриха: 5,3" /> ] [cy] = "drawLine.y1" r = "5" stroke = "black" stroke-width = "3" fill = "red" (dragStart) = "onCricleDragStart ($ e"): ng: /// GlobalSettingsModule /ImageCaptureComponent.html@253:55 в syntaxError (compiler.js: 486) в TemplateParser.parse (compiler.js: 24674) в JitCompiler._parseTemplate (compiler.js: 34629) в JitCompiler._compileTemplate (compiler.js: 34604) на eval (compiler.js: 34505) в Set.forEach () в JitCompiler._compileComponents (compiler.js: 34505) на eval (compiler.js: 34375) на Object.then (compiler.js: 475) в JitCompiler._compileModuleAndComponents (compiler.js: 34374) at resolPromise (zone.js: 814) at resolPromise (zone.js: 771) на eval (zone.js: 873) в ZoneDelegate.invokeTask (zone.js: 421) в Object.onInvokeTask (core.js: 4751) в ZoneDelegate.invokeTask (zone.js: 420) в Zone.runTask (zone.js: 188) при сливе MicroTaskQueue (zone.js: 595)

Ответы [ 2 ]

0 голосов
/ 14 июня 2019

Один из способов сделать это - использовать Elementref и изменить его атрибуты.

Ваш элемент (в вашем шаблоне html): 

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" #circle r="20" fill="red" />
</svg>

Изменить ваш элемент: 

@ViewChild("circle") circle: ElementRef;
ngAfterViewInit(): void {
   this.circle.nativeElement.setAttribute("cx", this.draw.circle.cx);
   this.circle.nativeElement.setAttribute("cy", this.draw.circle.cy);
}

Пожалуйста, посмотрите пример реализации здесь: https://codesandbox.io/s/angular-juzdl?fontsize=14

0 голосов
/ 14 июня 2019

Вы можете очистить это, создав компонент для вашего динамического SVG.Используйте @Inputs для отправки данных.

Ваши круги используют директиву?Убедитесь, что они соответствуют @Inputs - [cx] и [cy].

...