typescript - template - Cómo mostrar el objeto json usando*ngFor

ngfor track by

Question

Quiero mostrar los siguientes datos de Firebase

{
   "-KBN9O_qqz-nZ9tPWFdM":{
      "createdAt":1456399292790,
      "isActive":true,
      "name":"Hero 1"
   },
   "-KBN9gjJw1ZlMgt9pVsl":{
      "createdAt":1456399371220,
      "isActive":true,
      "name":"Hero 2"
   },
   "-KBN9hYI4vYAsyh5k1lX":{
      "createdAt":1456399374548,
      "isActive":true,
      "name":"Hero 3"
   }
}

cuando se hace el tutorial angular.io Tour of Heroes, por ejemplo

<li *ngFor="#hero of heroes">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

Entonces, la identificación del héroe debe mostrar, por ejemplo, -KBN9hYI4vYAsyh5k1lX y el nombre del héroe debe mostrar, por ejemplo, el hero 3

Investigué un poco y encontré esta solución stackoverflow de @Thierry Templier clave de acceso y valor de objeto usando * ngFor

(1) ¿Es esta la solución correcta para mi problema?

(2) ¿Existe una solución más simple para este problema porque creo que sería muy común que los desarrolladores que usan Angular2 muestren dichos datos json?

Answer 1

El ID de Firebase se llama $ .key . Además, # ahora se cambia para dejar . Esto funcionaría para ti:

<li *ngFor="let hero of heroes">
  <span class="badge">{{hero.$key}}</span> {{hero.name}}
</li>

Answer 2

Necesita implementar una tubería personalizada para hacer esto. ngFor solo admite matriz y no objeto.

Este tubo se verá así:

@Pipe({name: ''keys''})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

y úsalo así:

<span *ngFor="#entry of content | keys">           
  Key: {{entry.key}}, value: {{entry.value}}
</span>

Vea esta pregunta para más detalles:

• clave de acceso y valor del objeto usando * ngFor

Answer 3

Puede poner las teclas en una matriz y repetir las teclas.

export class IterateOverObject {
    public arrayOfKeys;

    @Input heros;
    constructor() {
        this.arrayOfKeys = Object.keys(this.heros);
    }
}

<li *ngFor="#key of arrayOfKeys">
  <span class="badge">{{key}}</span> {{heros[key].name}}
</li>

Esto me parece simple ... Más información está here