web-dev-qa-db-fra.com

Comment afficher un objet json avec * ngFor

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

lorsque vous faites angular.io Tour of Heroes tutoriel par exemple

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

Donc, l'identifiant du héros devrait montrer par exemple -KBN9hYI4vYAsyh5k1lX et le nom du héros doivent indiquer, par exemple, hero 3

J'ai fait des recherches et suis tombé sur cette solution de stackoverflow de @Thierry Templier clé d'accès et valeur d'objet utilisant * ngFor

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

(2) Existe-t-il une solution plus simple à ce problème car j’estime qu’il serait très courant que les développeurs utilisant Angular2 affichent de telles données json.

typescriptfirebaseangular
21
choopage - Jek Bao

Pour ce faire, vous devez implémenter un canal personnalisé. ngFor ne supporte que les tableaux et non les objets.

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 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:

41
Thierry Templier

Vous pouvez mettre les clés dans un tableau et les répéter.

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 me semble simple .. Plus d'infos c'est ici

7
Siva

Firebase id est appelé $. Key. De plus, # est maintenant changé en let. Cela fonctionnerait pour vous:

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