Comment faire pour afficher l'objet json à l'aide de *ngFor

Je veux afficher les données en dessous 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"
   }
}

lors angulaire.io Tour des Héros tutoriel par exemple

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

Sorte de héros id doit montrer par exemple -KBN9hYI4vYAsyh5k1lX
et le héros nom doit montrer par exemple hero 3

J'ai fait quelques recherches et venir à travers cette stackoverflow solution par @Thierry Templier l'accès de la clé et de la valeur de l'objet à l'aide de *ngFor

(1) Est-ce la bonne solution à mon problème?

(2) Est-il plus simple solution de ce problème, parce que je pense qu'il serait vraiment commun pour les développeurs utilisant Angular2 pour afficher ces données json.

InformationsquelleAutor choopage - Jek Bao | 2016-02-26
  1. 41

    Vous avez besoin pour mettre en œuvre une coutume pipe pour ce faire. ngFor prend uniquement en charge les array et non à l'objet.

    Ce tuyau va ressembler à ça:

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

    et de l'utiliser comme ça:

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

    Voir cette question pour plus de détails:

    • Salut Thierry, est-il une solution plus simple?
    • Bonne explication ici, cochez cette - Comment faire pour utiliser des Tuyaux: medium.com/front-end-hacking/...
    • Object.keys(value).forEach(key => { if (value.hasOwnProperty(key)) { keys = [...keys, { key, value: value[key] }]; } });
    • Pas besoin de vérifier .hasOwnProperty depuis l'Objet.les touches() renvoie propres propriétés. L'Objet.méthode keys() retourne un tableau d'un objet énumérable propriétés.
    • Cela fonctionne pour Angular5 sans #. Vous pouvez également ajouter un filtre de recherche avec <input [(ngModel)]="term"> et *ngFor="#entry of content | keys | filter:term". En outre, vous pouvez rechercher plusieurs propriétés avec keys.push({key: 'key'+'value[key].prop', value: value[key]}).
    InformationsquelleAutor Thierry Templier
  2. 7

    Vous pouvez mettre les clés dans un tableau et ng-repeat les touches.

    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>

    Cela semble simple pour moi.. Plus d'infos ici

    • Simple et efficace!
    InformationsquelleAutor Siva
  3. 5

    Firebase id est appelé $.clé.
    Aussi, # est maintenant changé de laisser.
    Ce serait travailler pour vous:

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