如何使用角度4中的ngFor动态渲染svg

Question

我有一个坐标列表。 我想以角度4动态渲染SVG图像。我正在低于错误。 请帮我解决。

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 ERROR错误：未捕获（在承诺中）：错误：模板解析错误：无法绑定到'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“）：ng：///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'，因为它不是'x1'的已知属性'：svg：line'。（“t）”（dragMove）=“onCricleDragMove（$ event）”（dragEnd）=“onCricleDragEnd（$ event）”/>] [x1] =“drawLine.x1”[y1] = “drawLine.y1”[x2] =“drawLine.x2”[y2] =“drawLine.y2”style =“stroke：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）; stroke-width：2; st”）：ng：///GlobalSettingsModule/ImageCaptureComponent.html@252：37不能绑定到'x2'，因为它不是'：svg：line'的已知属性。 （“t）”（dragEnd）=“onCricleDragEnd（$ event）”/>] [x2] =“drawLine.x2”[y2] =“drawLine.y2”style =“stroke：rgb（255,0,0） ; stroke-width：2; stroke-dasharray：5,3“）：ng：///GlobalSettingsModule/ImageCaptureComponent.html@252：56无法绑定到'y2'，因为它不是'的已知属性'： SVG：线”。 （“icleDragEnd（$ event）”/>] [y2] =“drawLine.y2”style =“stroke：rgb（255,0,0）; stroke-width：2; stroke-dasharray：5,3”/> <“）：ng：///GlobalSettingsModule/ImageCaptureComponent.html@252：75无法绑定到'cx'，因为它不是'：svg：circle'的已知属性。（”=“stroke：rgb（ 255,0,0）; stroke-width：2; stroke-dasharray：5,3“/>] [cx] =”drawLine.x1“[cy] =”drawLine.y1“r =”5“stroke =”黑色“stroke-width =”3“fill =”red“（dragStart）=”o“）：ng：///GlobalSettingsModule/ImageCaptureComponent.html@253：36无法绑定到'cy'，因为它不是'svg：circle'的已知属性。 （“0”; stroke-width：2; stroke-dasharray：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“）：ng：///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'，因为它不是'x1'的已知属性'：svg：line'。（“t）”（dragMove）=“onCricleDragMove（$ event）”（dragEnd）=“onCricleDragEnd（$ event）”/>] [x1] =“drawLine.x1”[y1] = “drawLine.y1”[x2] =“drawLine.x2”[y2] =“drawLine.y2”style =“stroke：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）; stroke-width：2; st”）：ng：///GlobalSettingsModule/ImageCaptureComponent.html@252：37不能绑定到'x2'，因为它不是'：svg：line'的已知属性。 （“t）”（dragEnd）=“onCricleDragEnd（$ event）”/>] [x2] =“drawLine.x2”[y2] =“drawLine.y2”style =“stroke：rgb（255,0,0） ; stroke-width：2; stroke-dasharray：5,3“）：ng：///GlobalSettingsModule/ImageCaptureComponent.html@252：56无法绑定到'y2'，因为它不是'的已知属性'： SVG：线”。 （“icleDragEnd（$ event）”/>] [y2] =“drawLine.y2”style =“stroke：rgb（255,0,0）; stroke-width：2; stroke-dasharray：5,3”/> <“）：ng：///GlobalSettingsModule/ImageCaptureComponent.html@252：75无法绑定到'cx'，因为它不是'：svg：circle'的已知属性。（”=“stroke：rgb（ 255,0,0）; stroke-width：2; stroke-dasharray：5,3“/>] [cx] =”drawLine.x1“[cy] =”drawLine.y1“r =”5“stroke =”黑色“stroke-width =”3“fill =”red“（dragStart）=”o“）：ng：///GlobalSettingsModule/ImageCaptureComponent.html@253：36无法绑定到'cy'，因为它不是'svg：circle'的已知属性。 （“0”; stroke-width：2; stroke-dasharray：5,3“/>] [cy] =”drawLine.y1“r =”5“stroke =”black“stroke-width =”3“fill = “red”（dragStart）=“onCricleDragStart（$ e”）：ng：///GlobalSettingsModule/ImageCaptureComponent.html@253：55 at syntaxError（compiler.js：486）at TemplateParser.parse（compiler.js：24674）at at JitCompiler._parseTemplate（compiler.js：34629）位于eval（compiler.js：34504）的JitCompiler._compileTemplate（compiler.js：34604），位于Eval的JitCompiler._compileComponents（compiler.js：34505）的Set.forEach（）处（编译器.js：34375）在Object.then（compiler.js：475）at at JitCompiler._compileModuleAndComponents（compiler.js：34374）at resolvePromise（zone.js：814）at resolvePromise（zone.js：771）at eval（zone .js：873）在ZoneDelegate.invokeTask（zone.js：421）的Zone.leInvokeTask（core.js：4751），位于Zone.runTask（zone.js：188）的ZoneDelegate.invokeTask（zone.js：420）at at drainMicroTaskQueue（zone.js：595）

Answer 1

您可以通过为动态SVG创建组件来清理它。 使用@Inputs发送数据。

你的圈子是否使用指令？ 确保它们与[cx]和[cy]匹配@Inputs 。

Answer 2

一种方法是使用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？fontize = 14