Cómo iterar claves de objetos usando *ngFor
Quiero iterar [objeto objeto] usando *ngFor en Angular 2.
El problema es que el objeto no es una matriz de objetos sino un objeto de objeto que contiene más objetos.
{
"data": {
"id": 834,
"first_name": "GS",
"last_name": "Shahid",
"phone": "03215110224",
"role": null,
"email": "[email protected]",
"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": "[email protected]"
}
}
Sé que podemos usar pipe para iterar el objeto, pero cómo podemos iterar más de un objeto a otro significa data->picture->thum:url .
Angular 6.0.0
https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25
introdujo unKeyValuePipe
Véase también https://angular.io/api/common/KeyValuePipe
@Component({
selector: 'keyvalue-pipe',
template: `<span>
<p>Object</p>
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
<p>Map</p>
<div *ngFor="let item of map | keyvalue">
{{item.key}}:{{item.value}}
</div>
</span>`
})
export class KeyValuePipeComponent {
object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
map = new Map([[2, 'foo'], [1, 'bar']]);
}
original
Puedes usar una pipa.
@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]);
}
}
<div *ngFor="let key of objs | keys">
Consulte también ¿Cómo iterar claves de objetos usando *ngFor?
Creo que la forma más elegante de hacerlo es usar JavaScript Object.keysde esta manera (primero implementé una tubería para eso, pero para mí, simplemente complicó mi trabajo de manera innecesaria):
en el componente, pase el objeto a la plantilla:
Object = Object;
luego en la plantilla:
<div *ngFor="let key of Object.keys(objs)">
my key: {{key}}
my object {{objs[key] | json}} <!-- hier I could use ngFor again with Object.keys(objs[key]) -->
</div>
Si tiene muchos subobjetos, debe crear un componente que imprima el objeto por usted. Imprimiendo los valores y claves que desee y en un subobjeto que se llama a sí mismo de forma recursiva.
Aquí puede encontrar una demostración de Stackblitz para ambos métodos.
Sé que esta pregunta ya está respondida pero tengo una solución para la misma.
También puede utilizar Object.keys()inside of *ngForpara obtener el resultado requerido.
He creado una demostración en stackblitz . Espero que esto ayude/guíe a usted/a otros.
FRAGMENTO DE CÓDIGO
código HTML
<div *ngFor="let key of Object.keys(myObj)">
<p>Key-> {{key}} and value is -> {{myObj[key]}}</p>
</div>
código de archivo .ts
Object = Object;
myObj = {
"id": 834,
"first_name": "GS",
"last_name": "Shahid",
"phone": "1234567890",
"role": null,
"email": "[email protected]",
"picture": {
"url": null,
"thumb": {
"url": null
}
},
"address": "XYZ Colony",
"city_id": 2,
"provider": "email",
"uid": "[email protected]"
}
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 úsalo en tu *ngFor
*ngFor="let item of data | keyobject"
Recorriendo objetos en plantillas HTML angulares
keyValuePipe se introduce en Angular: consulte https://angular.io/api/common/KeyValuePipe
Código rápido:
<p>Object</p>
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
<p>Map</p>
<div *ngFor="let item of map | keyvalue">
{{item.key}}:{{item.value}}
</div>
