Question 177910 in Html Question posted in
Some basic documentation can be found here.

How can I use *ngFor iterator var. in interpolation in Angular?

I have an Angular property that has subproperties following an interface created by myself. I would like to use it in order to avoid writing each line title and then matching the data I get from my Data Base.

For this, I would like to use *ngFOR and interpolation. I have tried several things, but I can’t find the syntax or the right alternative to achieve this.

My question is, how can I use the *ngFor iterator variable inside the interpolation of my variable ?

Here is an exemple of what i would like to achieve :

Property exemple in TS side :

//Custom property
information: customInterface[] = [
    {
      zone: "europe",
      names: [
        { dbName: "city1", title: "Paris" },
        { dbName: "city2", title: "Madrid" },
        { dbName: "city3", title: "Berlin" },
        { dbName: "city4", title: "Rome" },
      ]
    },
    { zone: "XX",
      names:[
XX]}
  ];

//Property 2 sotring data I actually want to show from the Data base
DBdata : customInterface2 = {
     city1 : 'string',
     city2 : 'string',
     city3 : 'string',
     etc....}

Html side :

<div *ngFor="let data of information">
    <div *ngIf="data.zone== 'europe'">
         <div *ngFor="let city of data.names">
              {{city.title}} : {{ DBdata.city.dbName }}
         </div>
    </div>
</div>

Hope it is more clear with the example. Thanks for the help !

Tags:

2

Answers


  1. 0

    This should work;

    DBData[city.dbName]

    This would make use the bracket syntax for accessing object properties – https://www.w3schools.com/js/js_objects.asp

    Login or Signup to reply.
  2. 0

    To achieve your desired result, you can use the bracket notation ([]) to access dynamic properties based on the values from your information array. Here’s an updated version of your code:

    // Custom property
information: customInterface[] = [
  {
    zone: "europe",
    names: [
      { dbName: "city1", title: "Paris" },
      { dbName: "city2", title: "Madrid" },
      { dbName: "city3", title: "Berlin" },
      { dbName: "city4", title: "Rome" },
    ]
  },
  // Add more entries as needed
];

// Property storing data from the database
DBdata: customInterface2 = {
  city1: 'Data for City 1',
  city2: 'Data for City 2',
  city3: 'Data for City 3',
  // Add more entries as needed
};

    <div *ngFor="let data of information">
  <div *ngIf="data.zone === 'europe'">
    <div *ngFor="let city of data.names">
      {{ city.title }}: {{ DBdata[city.dbName] }}
    </div>
  </div>
</div>

    In this code, the DBdata object uses the bracket notation to access the dynamic properties based on the dbName values from the information array. This allows you to interpolate the corresponding values dynamically.

    Note that you need to ensure that the DBdata object has properties with names matching the dbName values defined in your information array for this approach to work correctly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search