How to get access to object keys using *ngFor without using pipes

Question

I am using *ngFor to loop through the data and generate a dynamic table. But i only have access to the values of the object not the keys. How do you access the object keys using *ngFor WITHOUT USING PIPES

export class AppComponent {
  users: {}[] = [{
    firstName: 'John',
    lastName: 'Doe',
    email: 'johndoe@example.com'
  },
  {
    firstName: 'Jane',
    lastName: 'Doe',
    email: 'janedoe@example.com'
  },
  {
    firstName: 'Mary',
    lastName: 'Doe',
    email: 'marydoe@example.com'
  }
];
}

you can use Object.keys in your app.component.ts file https://stackoverflow.com/questions/43446241/for-in-or-for-of-object-keys — Content Solutions, Sep 16 '17 at 15:04
Possible duplicate of [Get array of object's keys](https://stackoverflow.com/questions/8763125/get-array-of-objects-keys) — monica, Sep 16 '17 at 18:56

score 0 · Answer 1 · answered Sep 16 '17 at 14:36

0

You can use this to access the key of object

*ngfor="let user of users; i=index"

answered Sep 16 '17 at 14:36

Ramy hakam

522
1
6
19

score 0 · Answer 2 · answered Sep 16 '17 at 14:43

Since you do not want to use Pipe , You could simply get the keys using Object.keys; in TS

export class App {
  users = [{
    firstName: 'John',
    lastName: 'Doe',
    email: 'johndoe@example.com'
  },
  {
    firstName: 'Jane',
    lastName: 'Doe',
    email: 'janedoe@example.com'
  },
  {
    firstName: 'Mary',
    lastName: 'Doe',
    email: 'marydoe@example.com'
  }
];
  getKeys = Object.keys;

}

and in template

 <div *ngFor="let key of getKeys(users[0])">{{key + ' : ' + users[0][key]}}

DEMO

How to get access to object keys using *ngFor without using pipes

2 Answers2