angular - template - Cómo iterar claves de objeto usando*ngFor

ngfor angular cli

Question

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 .

Answer 1

1.Cree una tubería personalizada para obtener claves.

import { Pipe, PipeTransform } from ''@angular/core'';

@Pipe({
  name: ''keys''
})
export class KeysPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return Object.keys(value);
  }
}

2. En el archivo de plantilla angular, puede usar * ngFor e iterar sobre su objeto objeto

<div class ="test" *ngFor="let key of Obj | keys">
    {{key}}
    {{Obj[key].property}
<div>

Answer 2

Angular ahora tiene un tipo de Objeto iterativo para exactamente este escenario, llamado Conjunto. Se ajustó a mis necesidades cuando encontré esta pregunta buscando. Usted crea el conjunto, lo "agrega" como si "empujara" a una matriz y lo suelta en un ngFor como una matriz. No hay tuberías ni nada.

this.myObjList = new Set();

...

this.myObjList.add(obj);

...

<ul>
   <li *ngFor="let object of myObjList">
     {{object}}
   </li>
</ul>

Answer 3

Creo que la forma más elegante de hacerlo es usar las JavaScript Object.keys como esta:

en el componente pasar Objeto a 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>

Answer 4

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 ayude / guíe a usted / 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]"
}

Answer 5

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

Answer 6

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"

Answer 7

yo haría esto:

<li *ngFor="let item of data" (click)=''onclick(item)''>{{item.picture.url}}</li>

Answer 8

Angular 6.0.0

https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25

introdujo un KeyValuePipe

Ver 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 objeto usando * ngFor?