Interpolation error on Angular result undefined

Question

I have an interpolation problem i need to do something that comes from an api like this,

{columna1=6.022, columna2=0.0, columna3=3.14.....,columnaN=5.55 }

Sometimes there's only one 'columna', sometimes comes 30 'columna' so I need to interpolate them easily, and for that I'm doing this in html file

<ng-container *ngFor="let numero of arregCols">
   <p>columna{{numero}} =  {{ columna[numero] }}</p>
</ng-container>

And in component.ts

  for (let xk = 1; xk < maxCols; xk++) {
      this.arregCols[this.arregCols.length] = xk.toString();
  }

I don't if I am making a wrong interpolation.

What I expected is

columna1 = 6.022
columna2 = 0.0
columna3 = 3.14
...
columnaN = 5.55

But I got nothing but

ERROR TypeError: Cannot read properties of undefined

Answer 1

You can use angular keyvalue pipe

in component.ts

  data = {
    columna1:6.022, 
    columna2:0.0, 
    columna3:3.14,
    columnaN:5.55 
  }

in component.html

<div *ngFor="let item of data| keyvalue">
    {{ item.key }} = {{ item.value }}
  </div>

gives result as:-

columna1 = 6.022
columna2 = 0
columna3 = 3.14
columnaN = 5.55