Angular2 nested ngFor. Is nested expressions possible?

2.3k views Asked by At

I'm trying to use a value in an expression binding. I know this isn't valid but want to know if something similar is possible. If not, is there another way to go about it.

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'Home',
templateUrl: './views/home/home.html'
})
export class HomeComponent implements OnInit{

    rows = [
       { 'FirstName': 'John', 'LastName': 'Doe' },
       { 'FirstName': 'Ashley', 'LastName': 'Doe' }
    ];

    cols = [
       { 'Desc': 'First Name', 'Data': 'FirstName' },
       { 'Desc': 'Last Name', 'Data': 'LastName' }
    ]; 
}

home.html

<table>
  <thead>
    <tr>
      <th *ngFor="let col of cols">{{col.Desc}}</th>
    </tr>
  </thead>
  <tr *ngFor="let row of rows">     
    <td *ngFor="let col of cols">
      {{row.{{col.Data}}}}     
    </td>
  </tr>
</table>
1

There are 1 answers

0
slaesh On BEST ANSWER

Use it like this:

{{ row[col.Data] }}

In Javascript you can access every property via obj.propName AND obj[propName], too!