javascript - Angular 4 Firebase manipulate *ngFor of Observable or use index in an Observable -


i using angular 4 firebase database.in app want display on browser leaderboard top ten users. using code on component.ts

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

and html code:

<a class="btn btn-download  nav-item vlink  dropdown-toggle pointer " data-toggle="dropdown">leaderboard</a>           <ul class="dropdown-menu text-center list">                                   <ul *ngfor="let topuser of topusers | async">                                     <li> {{ topuser.username | json }}:{{ topuser.totalscore | json }} </li>                                   </ul>            </ul>         </div> 

everything works fine , first 10 users.however want results shown example:

<ul>             <li><span>first:</span><span>unknow</span></li>             <li><span >second:</span><span>unknow</span></li>             <li><span >third:</span><span >unknow</span></li>             <li><span >fourth:</span><span>unknow</span></li>             <li><span >fifth</span><span>unknow</span></li>              ...etc...                     </ul> 

where unknown replaced correct index of topusers observable. want control *ngfor="let topuser of topusers | async" 10 topusers can put first,second etc.. left on them. searched everywhere couldnt find on how use specific index on observable on the html code.

you can use index variable of ngfor directive

 <div *ngfor="let item of observable$ | async; let = index">      <li> {{i + 1 | ordinalstring}} {{ topuser.username | json }}:{{ topuser.totalscore | json }} </li>  </div> 

then run index through pipe desired string.

@pipe({name: 'ordinalstring'}) export class ordinalstringpipe implements pipetransform {     // super simple ordinal string method     transform(index: number): string{         let ordinalstrings = ['zero', 'first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth', 'tenth'];          return ordinalstrings[index];     } } 

here working plunkr: https://plnkr.co/edit/trvaibgjb9v2ikren3uy?p=preview

here article demoing ngfor index variable: https://coryrylan.com/blog/angular-ng-for-syntax


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -