Angular ngFor gives an error in svg, even though it compiles

Issue

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. 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:

Cannot read property 'x' of undefined

Solution

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. Just try ngif else block or nodes[i+1]?.x

Answered By - Talha Akca