Angular 4 Firebase Observable avec .map() apears deux fois sur l'actualisation et non inversé

Question

J'utilise Angular 4 avec Firebase et AngularFire. Je veux afficher sur mon code Html le premier top 10 utilisateurs, donc mon code est

export class HomefillerComponent implements OnInit { 
    topusers: Observable<any>; 
    constructor(db: AngularFireDatabase,public authService: AuthService) { 


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

Ma base de données firebase est:

"users" : { 
    "Test1" : { 
     "totalscore" : 50, 
     "username" : "test1" 
    }, 
    "Test2" : { 
     "totalscore" : 30, 
     "username" : "test2" 
    }, 
    "Test3" : { 
     "totalscore" : 20, 
     "username" : "test1" 
    }, 
    "Test4" : { 
     "totalscore" : 10, 
     "username" : "test1" 
    }, 
    "Zekes" : { 
    "totalscore" : 14, 
    "username" : "Zekes" 
     } 
    } 

Quand je navigue dans mon tout angulaire 4 application fonctionne fine.However quand je réfracte la page, je reçois deux console.log(a) un avec l'objet inversé et un deuxième avec pas l'objet inversé.Alors mon html affiche l'objet non inversé. Avez-vous une idée de ce qui ne va pas ?? Cela n'arrive que lorsque je rafraîchis la page. C'est le console.log(a) que je reçois lorsque je rafraîchis la page.

Answer 1

Après quelques tests, j'ai découvert ce qui se passe:

La chose est que la fonction .reverse() retourne non seulement un tableau inversé, mais inverse le tableau lui-même. Et ce changement à topusers résulte dans le tir observable .map() une fois de plus, ce qui inverse le tableau à sa forme originale.

Pour résoudre ce problème, remplacez simplement l'instruction return par return topusers.slice().reverse();. La fonction .slice() renvoie une nouvelle copie du tableau, ce qui permettra d'éviter ce problème.