Angular4: Concatenate string to form dynamic key in template

Question

I am trying to dynamically create a key inside the template from an *ngFor index.

<div *ngFor="let col of table; let i = index">
  <span *ngFor="let row of col; let j = index">
    {{ row.ricj }}
  </span>
</div>

where the "i" and "j" in "ricj" are actually the indices "i" and "j". Is this possible?

The original table object is build this way,

makeTable(){
    for(this.c = 0; this.c < this.columnslength; this.c++){
      for(this.r = 0; this.r < this.rowslength; this.r++){
        this.key = "r" + this.r + "c" + this.c;
        this.cell = { [this.key]: this.key };
        this.cols.push(this.cell);
      }
      this.table.push(this.cols);
      this.cols = [];
  }
}

the table object looks like this,

[
   {
      [{ "r0c0": "r0c0" }, { "r1c0": "r1c0" }]
   },
   {
      [{ "r0c1": "r0c1" }, { "r1c1": "r1c1" }]
   }
]

I want the key in each loop to be a concatenation of the indices. — ofey
– ofey, Commented Jun 30, 2017 at 17:22

alehn96 · Accepted Answer · 2017-06-30 21:31:04Z

3

Try this,

  <div *ngFor="let col of table; let i = index">
    <span *ngFor="let row of col; let j = index">
        {{ row['r' + j + 'c' + i] }}
    </span>
  </div>

edited Jun 30, 2017 at 21:31

answered Jun 30, 2017 at 19:14

alehn96

1,4031 gold badge14 silver badges23 bronze badges

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

2 Comments

ofey Over a year ago

This is very interesting but unfortunately gives an error. HighlightTableComponent.html:6 ERROR TypeError: Cannot read property '0' of undefined

ofey Over a year ago

You're a genius, this works . {{ row['r' + j + 'c' + i] }}

Collectives™ on Stack Overflow

Angular4: Concatenate string to form dynamic key in template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related