在html上显示的Angular4 Firebase FirebaseListObservable控件索引

Question

I want to create a leaderboard in my application.So I need to read the names and totalscores info from the Firebase Database and display them on browser. My goal is to to display something like this on browser but replace the Unknown with database usernames and topscores of course.

Leaderboard

First:Unknown,Topscore:Unknown

Second:Unknown,Topscore:Unknown

Third:Unknown,Topscore:Unknown

Fourth:Unknown,Topscore:Unknown

Fifth:Unknown,Topscore:Unknown

My firebase database is:

"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"
    }
  }

With the following code I can get the inverted info from what I want.

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


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

And last using *ngFor I can display the 5 topscores from the fifth to the first.

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

My question is that is there any way to control the *ngFor so instead to start from the first index of the list to start from the last and end on the first?? Or is there anyway I can control the index of the FirebaseListObservable that I want to display on the browser??

Answer 1

You don't necessarily want to manipulate the order of the ngFor but instead manipulate the data being passed into the ngFor. You can reverse the order of the data returned from the firebase observable with the .map method

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());
}

So now the array being passed to the ngFor is reversed.