Angular4 Firebase FirebaseListObservable indice de contrôle à afficher sur html

Question

Je veux créer un leaderboard dans mon application.Alors j'ai besoin de lire les informations sur les noms et totalscores de la base de données Firebase et les afficher sur le navigateur. Mon but est d'afficher quelque chose comme ça sur le navigateur mais remplacez l'Inconnu par des noms d'utilisateurs et des topscores de base de données bien sûr.

Leaderboard

Première: Inconnu, Topscore: Inconnu

Second: Inconnu, Topscore: Inconnu

Troisième: Inconnu, Topscore: Inconnu

Quatrième: Unknown, Topscore: Inconnu

Cinquième: Inconnu, Topscore: Inconnu

Ma base de données est firebase:

"users" : { 
    "Test1" : { 
     "totalscore" : 50, 
     "username" : "test1" 
    }, 
    "Test2" : { 
     "totalscore" : 30, 
     "username" : "test2" 
    }, 
    "Test3" : { 
     "totalscore" : 20, 
     "username" : "test1" 
    }, 
    "Test4" : { 
     "totalscore" : 10, 
     "username" : "test1" 
    }, 
    "Test5" : { 
     "totalscore" : 50, 
     "username" : "test1" 
    }, 
    "Test6" : { 
     "totalscore" : 30, 
     "username" : "test2" 
    }, 
    "Test7" : { 
     "totalscore" : 20, 
     "username" : "test1" 
    }, 
    "Test8" : { 
     "totalscore" : 10, 
     "username" : "test1" 
    } 
    } 

Avec le code suivant je peux obtenir l'information inversée de ce que je veux.

topusers: FirebaseListObservable<any>; 
    constructor(db: AngularFireDatabase) { 


     this.topusers = db.list('users', { 
     query: { 
     orderByChild: "totalscore", 
     limitToLast: 10, 
     } 
     }); 
    } 

Dernière utilisation de * ngFor Je peux afficher les 5 topscores de la cinquième à la première.

<ul *ngFor="let topuser of topusers | async"> 
    <li class = "white" > 
     {{ topuser.username | json }}: 
     {{ topuser.totalscore | json }}   
    </li> 
</ul> 

Ma question est que est-il possible de contrôler le * ngFor donc au lieu de commencer par le premier indice de la liste à partir de la dernière et se termine le premier ?? Ou est-ce que je peux contrôler l'index de FirebaseListObservable que je veux afficher sur le navigateur?

Answer 1

Vous ne voulez pas nécessairement manipuler l'ordre du ngFor, mais manipulez plutôt les données transmises dans le ngFor. Vous pouvez inverser l'ordre des données renvoyées par l'observable firebase avec la méthode .map

topusers: Observable<any>; // use Observable<> instead of FirebaseListObservable<> since .map is an rxjs method that returns the type Observable 

constructor(){ 
    this.topusers = db.list('users', { 
     query: { 
      orderByChild: "totalscore", 
      limitToLast: 10, 
     } 
    }) 
    .map(res => res.reverse()); 
} 

Alors maintenant, le réseau étant passé à l'ngFor est inversée.