[英]Angular ngFor gives an error in svg, even though it compiles
I'm trying to make a recursion of lines to make a graph, but there is a strange error in the console, even though it works on node.我正在尝试对线条进行递归来制作图表,但是控制台中出现了一个奇怪的错误,即使它在 node.js 上工作也是如此。 Here us the template:
这是我们的模板:
<svg height = "200" width = "300">
<g *ngFor = "let node of nodes; let i = index; let last = last;">
<line
[attr.x1] = nodes[i].x
[attr.y1] = nodes[i].y
[attr.x2] = nodes[i+1].x
[attr.y2] = nodes[i+1].y
/>
<line *ngIf = last
[attr.x1] = nodes[i].x
[attr.y1] = nodes[i].y
[attr.x2] = nodes[i].x
[attr.y2] = nodes[i].y
/>
</g>
</svg>
Here is the TypeScript:这是打字稿:
export class VisitsGraphComponent implements OnInit {
nodes = [
{ x: 0, y: 0 },
{ x: 40, y: 120 },
{ x: 80, y: 80 },
{ x: 120, y: 90 },
{ x: 160, y: 40 }
]
ngOnInit():void {
}
}
I've tried to use simply the node.x and put it in the ngOnInit(), but the exact same error:我尝试简单地使用 node.x 并将其放在 ngOnInit() 中,但完全相同的错误:
Cannot read property 'x' of undefined
for the last item your nodes array you're still trying to reach nodes[i+1] but there isn't an element, so it will throw error.对于您的节点数组的最后一项,您仍在尝试到达节点 [i+1] 但没有元素,因此它会引发错误。 Just try ngif else block or nodes[i+1]?.x
试试 ngif else block or nodes[i+1]?.x
You Bind wrong data Change nodes[i].x
to > node[i].x
So try to implement this html file You Bind wrong data 将
nodes[i].x
改为> node[i].x
所以尝试实现这个html文件
.html .html
<svg height = "200" width = "300">
<g *ngFor = "let node of nodes; let i = index; let last = last;">
<line
[attr.x1] = node[i].x
[attr.y1] = node[i].y
[attr.x2] = node[i+1].x
[attr.y2] = node[i+1].y
/>
<line *ngIf = last
[attr.x1] = node[i].x
[attr.y1] = node[i].y
[attr.x2] = node[i].x
[attr.y2] = node[i].y
/>
</g>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.