¿Cómo iterar las claves del objeto usando * ngFor?

Estuve investigando y descubrí que puedo usar lo siguiente para usar * ngPara más de un objeto:

...

donde ObjNgFor pipe es:

 @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]); } } 

Sin embargo, cuando tengo un objeto como este:

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

No estoy muy seguro de cómo puedo extraer ‘propertyA’ y ‘propertyB’, de modo que sea accesible desde la directiva * ngFor. ¿Algunas ideas?

ACTUALIZAR

Lo que quiero hacer es presentar el siguiente HTML:

  
{{SOMETHING}}:{{obj.description}}

Donde algo sería igual a propertyA y propertyB (así es como está estructurado el objeto). Entonces, esto llevaría a:

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

Actualizar

En 6.1.0- KeyValuePipe se introdujo KeyValuePipe https://github.com/angular/angular/pull/24319

 
{{ item.key }} - {{ item.value }}

Ejemplo de Plunker

Versión previa

Podrías probar algo como esto

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

Y luego en tu plantilla

  
{{obj.key}} - {{obj.description}}

Plunker

O en lugar de crear un conducto y pasar un objeto a * ngFor, simplemente pase Object.keys(MyObject) a * ngFor. Devuelve lo mismo que la tubería, pero sin la molestia.

En el archivo de TypeScript:

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

En plantilla (html):

 *ngFor="let item of list" 

Simplemente devuelva las claves de la tubería en lugar de los valores y luego use las teclas para acceder a los valores:

( let lugar de # en la 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: ` 

Hello

{{key}}:{{objs[key].description}}
`, }) export class AppComponent { objs = { "propertyA":{ "description":"this is the propertyA", "default":"sth" }, "propertyB":{ "description":"this is the propertyB", "default":"sth" } }; }

Ejemplo de Plunker

Véase también Select basado en enum en Angular2