Angular changing variable name dynamically

Question

I have a JSON Object in my app.component.ts with several values in it with different indices at the end like

 component.JSONObject.Q_HH_44

In a different post( Angular 5 Dynamic variable name ) I read i could change the variable name dynamically in the HTML-Template like such:

{{this['component.JSONObject.Q_HH_' + component.id]}}

However this doesn't seem to work for me and I dont't get why. I think the problem is the this but without the string is written instead of dispayling the variable's value

Here's a Stackblitz with my struggle and all cases I thought could work https://stackblitz.com/edit/angular-ivy-zqlub5?file=src/app/app.component.html

score 0 · Accepted Answer · answered Apr 26 '21 at 04:29

I played with your stackblitz and got what you want:

<p>
  {{obj.col1['Attribute' + values[1]]}}
  <!-- only String -->
</p>
<p>
  {{obj.col1['Attribute' + values[1]]}}
  <!-- nothing at all -->
</p>

You can't use dots in string to get json objects, js doesn't work this way.

Angular changing variable name dynamically

1 Answers1