angular - template - ngfor object

¿Cómo iterar claves de objeto usando*ngFor?

Question

Estuve investigando y descubrí que puedo usar lo siguiente para usar * ngFor sobre un objeto:

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

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'', para que sea accesible desde la directiva * ngFor. ¿Algunas ideas?

ACTUALIZAR

Lo que quiero hacer es presentar el siguiente HTML:

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

Donde algo sería igual a la propertyA y la propertyB (así es como se estructura el objeto). Entonces, esto llevaría a:

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

Answer 1

Actualizar

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

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

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

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

Plunker

Answer 2

O, en lugar de crear una tubería 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 TypeScript:

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

En plantilla (html):

*ngFor="let item of list"

Answer 3

Simplemente devuelva las claves de la tubería en lugar de los valores y luego use las claves 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: `
<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"
}
};
}

Ejemplo de Plunker

Vea también Seleccionar basado en enumeración en 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
]
})

ejemplo.componente.html

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