Cómo iterar las claves de objeto usando * ngFor

Quiero iterar [object object] usando * ngFor en Angular 2.

El problema es que el objeto no es una matriz de objeto sino un objeto que contiene más objetos.

{ "data": { "id": 834, "first_name": "GS", "last_name": "Shahid", "phone": "03215110224", "role": null, "email": "test@example.com", "picture": **{ <-- I want to get thumb: url but not able to fetch that** "url": null, "thumb": { "url": null } }, "address": "Nishtar Colony", "city_id": 2, "provider": "email", "uid": "test@example.com" } } 

Sé que podemos usar pipe para iterar el objeto, pero la forma en que podemos iterar más lejos de un objeto a otro significa data-> picture-> thum: url .

Angular 6.0.0

https://github.com/angular/angular/blob/master/CHANGELOG.md#610-beta1-2018-06-13

introdujo un KeyValuePipe

 @Component({ selector: 'keyvalue-pipe', template: ` 

Object

{{item.key}}:{{item.value}}

Map

{{item.key}}:{{item.value}}
` }) export class KeyValuePipeComponent { object: {[key: number]: string} = {2: 'foo', 1: 'bar'}; map = new Map([[2, 'foo'], [1, 'bar']]); }

original

Puedes usar un tubo

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

Consulte también ¿Cómo iterar las claves de objeto usando * ngFor?

Creo que la manera más elegante de hacer eso es usar las javascript Object.keys como esta:

en el Objeto de pase de componente a la plantilla:

 Object = Object; 

luego en la plantilla:

 
my key: {{key}} my object {{objs[key] | json}}

Tienes que crear una tubería personalizada.

 import { Injectable, Pipe } from '@angular/core'; @Pipe({ name: 'keyobject' }) @Injectable() export class Keyobject { transform(value, args:string[]):any { let keys = []; for (let key in value) { keys.push({key: key, value: value[key]}); } return keys; }} 

Y luego úsala en tu * ngPara

 *ngFor="let item of data | keyobject" 

Sé que esta pregunta ya está respondida, pero tengo una solución para esto.

También puede usar Object.keys() dentro de *ngFor para obtener el resultado requerido.

He creado una demostración en stackblitz . Espero que esto te ayude / guíe a ti / a los demás.

FRAGMENTO DE CÓDIGO

código HTML

 

Key-> {{key}} and value is -> {{myObj[key]}}

Código de archivo .ts

 Object = Object; myObj = { "id": 834, "first_name": "GS", "last_name": "Shahid", "phone": "1234567890", "role": null, "email": "test@example.com", "picture": { "url": null, "thumb": { "url": null } }, "address": "XYZ Colony", "city_id": 2, "provider": "email", "uid": "test@example.com" } 

1. Crea una tubería personalizada para obtener las llaves.

 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'keys' }) export class KeysPipe implements PipeTransform { transform(value: any, args?: any): any { return Object.keys(value); } } 
  1. En el archivo de plantilla angular, puede usar * ngFor e iterar sobre su objeto objeto
 
{{key}} {{Obj[key].property}

Si está utilizando un operador de map() en su respuesta, podría encadenarle un operador de toArray() … entonces debería poder iterar a través de una matriz recién creada … al menos eso funcionó para mí 🙂

Angular ahora tiene un tipo de objeto iterativo para exactamente este escenario, llamado Conjunto. Se ajustaba a mis necesidades cuando encontré la búsqueda de esta pregunta. Usted crea el conjunto, lo “agrega” como si fuera “empujar” a un conjunto, y lo suelta en un ngPara igual que un conjunto. Sin tuberías ni nada.

 this.myObjList = new Set(); 

 this.myObjList.add(obj); 

 
  • {{object}}

Yo haría esto:

 
  • {{item.picture.url}}