Angular use variable value as opposed to string of variable name

Question

I am working with an array that looks something like this:

[
   {
     f_name: "c_name",
     title: "k c name",
     con_name: "cname",
     path: "this.dialogData.name"
   },
   {
     f_name: "c_num",
     title: "k c num",
     con_name: "cnum",
     path: "this.dialogData.number"
   }
]

In the html file, I'm looping through this array as follows:

        <mat-form-field *ngFor ="let f of fields">
            <mat-label>{{f.title}}</mat-label>
            <input  formControlName={{f.con_name}} matInput name={{f.con_name}} value={{f.path}}>
        </mat-form-field>

Everything is working as expected except the {{f.path}} is coming up as the string as opposed to the variable.

So for example, in the first question, the value is set to this.dialogData.name as opposed to test_name which is the value that corresponds to the variable this.dialogData.name.

Is there anything I can do to refer to the underlying variable? As opposed to having the value as the path string.

This doesn't look right. If you have the object this.dialogData when creating the fields array, why not initialize the property path with the values of "this.dialogData.name" instead of a string? — Barremian
– Barremian, Commented Aug 25, 2020 at 16:23

Barremian · Accepted Answer · 2020-08-25 16:25:16Z

1

Expanding from my comment, I believe you actually tried to initialize the properties path in each element to the properties in this.dialogData instead of assigning the strings. In that case, you could remove the enclosing quotations for the path properties.

Try the following

fields = [
  {
    f_name: "c_name",
    title: "k c name",
    con_name: "cname",
    path: this.dialogData.name         // <-- no quotations
  },
  {
    f_name: "c_num",
    title: "k c num",
    con_name: "cnum",
    path: this.dialogData.number       // <-- no quotations
  }
];

answered Aug 25, 2020 at 16:25

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular use variable value as opposed to string of variable name

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related