typescript - Cómo mostrar un objeto json usando *ngFor

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 Tour of Heroes de angular.io por ejemplo

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

Así que el id del héroe debería mostrar por ejemplo -KBN9hYI4vYAsyh5k1lX y el nombre del héroe debería mostrar por ejemplo héroe 3

He hecho algo de investigación y me encontré con esta solución de StackOverflow de @Thierry Templier para acceder a la clave y el valor de un objeto usando *ngFor

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

(2) ¿Hay una solución más simple para este problema porque siento que sería realmente común para los desarrolladores que usan Angular2 mostrar este tipo de datos JSON.

Respuesta #1

Necesitas implementar un pipe personalizado para hacer esto. ngFor solo soporta arrays y no objetos.

Esta tubería 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>

Consulta esta pregunta para más detalles:

• acceder a la clave y el valor de un objeto usando *ngFor

Respuesta #2

Puedes poner las llaves en un arreglo y usar ng-repeat en las llaves.

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á aquí