How to iterate over keys of objects using * ngFor?

Question

I dug through and found out that I can use the following to use * ngFor over an object:

<div *ngFor="#obj of objs | ObjNgFor">...</div> 

where is ObjNgFor pipe:

 @Pipe({ name: 'ObjNgFor', pure: false }) export class ObjNgFor implements PipeTransform { transform(value: any, args: any[] = null): any { return Object.keys(value).map(key => value[key]); } } 

However, when I have an object like this:

 { "propertyA":{ "description":"this is the propertyA", "default":"sth" }, "propertyB":{ "description":"this is the propertyB", "default":"sth" } } 

I'm not quite sure how I can extract 'propertyA' and 'propertyB' so that it is accessible from the * ngFor directive. Any ideas?

UPDATE

What I want to do is submit the following HTML:

  <div *ngFor="#obj of objs | ObjNgFor" class="parameters-container"> <div class="parameter-desc"> {{SOMETHING}}:{{obj.description}} </div> </div> 

Where something will be equal to propertyA and propertyB (this is how the object is structured). Thus, this will result in:

 propertyA:this is the propertyA propertyB:this is the propertyB 

Answer 1

Refresh

In 6.1.0-beta.1, KeyValuePipe was introduced https://github.com/angular/angular/pull/24319

 <div *ngFor="let item of {'b': 1, 'a': 1} | keyvalue"> {{ item.key }} - {{ item.value }} </div> 

Plunger example

previous version

You can try something like this

 export class ObjNgFor implements PipeTransform { transform(value: any, args: any[] = null): any { return Object.keys(value).map(key => Object.assign({ key }, value[key])); } } 

And then according to your template

  <div *ngFor="let obj of objs | ObjNgFor"> {{obj.key}} - {{obj.description}} </div> 

Plunker

Answer 2

Or instead of creating a channel and passing an object to * ngFor, just pass Object.keys(MyObject) to * ngFor. He returns the same as in the pipe, but without the hassle.

In TypeScript file:

 let list = Object.keys(MyObject); // good old javascript on the rescue 

In the template (html):

 *ngFor="let item of list" 

Answer 3

Just return the keys from the channel instead of the values, and then use the keys to access the values:

( let instead of # in beta .17)

 @Pipe({ name: 'ObjNgFor', pure: false }) export class ObjNgFor implements PipeTransform { transform(value: any, args: any[] = null): any { return Object.keys(value)//.map(key => value[key]); } } 

 @Component({ selector: 'my-app', pipes: [ObjNgFor], template: ` <h1>Hello</h1> <div *ngFor="let key of objs | ObjNgFor">{{key}}:{{objs[key].description}}</div> `, }) export class AppComponent { objs = { "propertyA":{ "description":"this is the propertyA", "default":"sth" }, "propertyB":{ "description":"this is the propertyB", "default":"sth" } }; } 

Plunger example

See also Select Based on Enumeration in Angular2

Answer 4

keys.pipe.ts

 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'keys' }) export class KeysPipe implements PipeTransform { transform(obj: Object, args: any[] = null): any { let array = []; Object.keys(obj).forEach(key => { array.push({ value: obj[key], key: key }); }); return array; } } 

app.module.ts

 import { KeysPipe } from './keys.pipe'; @NgModule({ declarations: [ ... KeysPipe ] }) 

example.component.html

 <elem *ngFor="let item of obj | keys" id="{{ item.key }}"> {{ item.value }} </elem> 

Answer 5

Just pass the JavaScript Object into a component like Object=Object and use it as if you were using it in JavaScript. See my answer here .

Answer 6

Use index:

 <div *ngFor="let value of Objects; index as key"> 

Using:

 {{key}} -> {{value}}