Como exibir o object json usando * ngFor

Quero exibir os dados abaixo do 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" } } 

quando fazendo angular.io Tour of Heroes tutorial por exemplo

 
  • {{hero.id}} {{hero.name}}
  • Então o ID do herói deve mostrar por exemplo -KBN9hYI4vYAsyh5k1lX e o nome do herói deve mostrar por exemplo o hero 3


    Eu fiz algumas pesquisas e me deparei com essa solução stackoverflow pela chave de access @Thierry Templier e valor do object usando * ngFor

    (1) Esta é a solução certa para o meu problema?

    (2) Existe uma solução mais simples para este problema porque eu sinto que seria muito comum para os desenvolvedores que usam Angular2 para exibir esses dados json.

    Você precisa implementar um pipe personalizado para fazer isso. ngFor suporta apenas matriz e não object.

    Esse tubo ficará assim:

     @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; } } 

    e usá-lo assim:

      Key: {{entry.key}}, value: {{entry.value}}  

    Veja esta pergunta para mais detalhes:

    • chave de access e valor do object usando * ngFor

    Você pode colocar as chaves em um array e repetir as chaves.

     export class IterateOverObject { public arrayOfKeys; @Input heros; constructor() { this.arrayOfKeys = Object.keys(this.heros); } } 
  • {{key}} {{heros[key].name}}
  • Isso parece simples para mim. Mais informações estão aqui

    O ID do Firebase é chamado $ .key . Além disso, # agora é alterado para deixar . Isso funcionaria para você:

     
  • {{hero.$key}} {{hero.name}}