Question

我的离子应用程序中有一个排行榜，我在其中显示每个注册用户的位置，用户名和用户获得的积分。

用户名和点存储在数据库中，而是定义为每个用户打印包含用户的所有列表的索引的位置。

我希望能够在排行榜的底部显示已登录用户的位置，如图片所示：

在示例中，如果YYY已记录，我想要显示＆＃34; USER在位置2＆＃34;

我如何使用我的代码检索用户位置（可能将其存储在变量中）并在html上显示？有可能吗？

rank.ts （创建我的leaderbord列表的函数）

   this.itemRef.orderByChild("total_points").on('value',itemSnapshot =>{
    this.items = [];
    itemSnapshot.forEach( itemSnap => {
      this.items.push(itemSnap.val());
      return false;
    });
    return this.items.reverse(); 
  });

rank.html

<ion-content padding>
<ion-card>
    <ion-card-header class ="centered" id="header_classifica" > 
        <div > USER you are in position XXX</div>
  </ion-card-header>

    <div id="table">
        <div class="row header">
            <div class="col classifica"> <b class="voci_table_header"> Posizione</b></div>
            <div class="col classifica"> <b class="voci_table_header"> Username</b></div>
            <div class="col classifica"> <b class="voci_table_header"> Punti</b></div>

        </div>

        <div class="row" *ngFor="let item of items; let i = index">
            <div class="col classifica">{{i + 1}}</div>
            <div class="col classifica">{{ item.username }} </div>
            <div class="col classifica">{{ item.total_points }} </div>
        </div>

    </div>
</ion-card>

</ion-content>

我希望我的问题很清楚。提前谢谢。

编辑：使用此代码解决了问题

 this.itemRef.orderByChild("total_points").on('value',itemSnapshot =>{
      this.items = [];
      itemSnapshot.forEach( itemSnap => {
        this.items.push(itemSnap.val());
        return false;
      });
      var j = 0;
      this.items.reverse().forEach(i=>{
        j++;
        if (new String(i.username).valueOf() == new String(this.username).valueOf()){
          console.log("Trovato")
          this.position = j;
        }
      })

      return this.items; 
    });

Answer 1

我会给你一个简单的解决方案。

信息： 由于在移动设备上抓取所有用户的开销，如果您的用户数量较少（例如200），解决方案可以正常运行memor y。（无论如何它适用于任何数量的用户，但不需要在移动存储器中获取大量数据）

我们将获取所有用户，然后我们将根据他们的点对其进行重新排序，因此我们的模板中的* ngFor将分配正确的位置，我们将有一个变量来存储访问排名页面的当前用户的位置，以便我们可以在选择器中绑定。

1）创建服务：

首先我们将创建一个服务来实现这一目标。

信息： 创建服务，以便我们可以将其注入需要访问此已排序数组的任何组件以及此当前用户。例如，创建user.service.ts文件。（我认为你的方法orderByChild可以工作，但我以前没用过，所以不能告诉）。

import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
import {Http,Response} from '@angular/http';


@Injectable()
export class UserService {

sortedArray: Array <{username: string,total_points: Number}>;
currentUserPosition:Number;
    constructor(private http: Http) {

    }

getUsers(){

   let items: Array <{username: string,total_points: Number}>;

   this.itemRef.on('value',itemSnapshot =>{ // you need to define your item Ref as a global variable in this service
    itemSnapshot.forEach( itemSnap => {
      this.items.push(itemSnap.val());
    });
     this.sortUsers(items);
  });
}

sortUsers(users) {
    this.sortedArray = users.sort(function(a, b) {
       return b.total_points - a.total_points // descending
       //return a.total_points - b.total_points // accending
    });
}

getUserPosition(user){ 
    this.currentUserPosition = this.sortedArray.map(function (x) { return x.username}).indexOf(user.username);
}

}

2）Rank.ts

import {UserService} from '<path>/user.service';


constructor(public userService:UserService){
   this.userService.getUsers();
   this.userService.getUserPosition(user); // you need to pass the user accessing the rank page
}

第3）Rank.html

<ion-card-header class ="centered" id="header_classifica" > <div > USER you are in position {{userService.currentUserPosition + 1}}</div> </ion-card-header> <div class="row" *ngFor="let item of userService.sortedArray; let i = index"> // we are accessing the sorted array defined in the service <div class="col classifica">{{i + 1}}</div> <div class="col classifica">{{ item.username }} </div> <div class="col classifica">{{ item.total_points }} </div> </div>

如何使用Firebase数据在排行榜中显示用户位置？

1 个答案: