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

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

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

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

在本例中，如果记录了YYY，我希望显示“位置2的用户”

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

rank.ts（创建我的领导命令列表的函数）

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>

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

---

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

信息：如果您的用户数量很少（例如200个），那么该解决方案可以正常工作，这是由于在移动内存上获取所有用户的开销造成的。（不管是多少用户，该解决方案都可以正常工作，但不需要在移动内存中获取大量数据）

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

1）创建服务：

首先，我们将创建一个这样做的服务

信息：创建服务，以便我们可以将其插入需要访问此排序数组和当前用户的任何组件中。创建例如user.service.ts文件。（我认为您的orderByChild方法可以工作，但我以前没有使用过，所以无法判断）

从'@angular/core'导入{Injectable}；
导入'rxjs/add/operator/map'；
从'@angular/Http'导入{Http，Response}；
@可注射（）
导出类用户服务{
阵列；
currentUserPosition:编号；
构造函数（专用http:http）{
}
getUsers（）{
让项目：数组；
this.itemRef.on（'value'，itemsnashot=>{//您需要在此服务中将itemRef定义为全局变量
itemSnapshot.forEach（itemSnap=>{
this.items.push（itemSnap.val（））；
});
这是巫师（道具）；
});
}
巫师（用户）{
this.sortedArray=users.sort（函数（a，b）{
返回b.总积分-a.总积分//递减
//返回a.total_points-b.total_points//accending
});
}
getUserPosition（用户）{
this.currentUserPosition=this.sortedArray.map（函数（x）{return x.username}）.indexOf（user.username）；
}
}

2）排名。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
}

从'/user.service'导入{UserService}；
构造函数（公共用户服务：用户服务）{
this.userService.getUsers（）；
this.userService.getUserPosition（user）；//您需要传递访问排名页面的用户
}

3）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>

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

用户您位于位置{{userService.currentUserPosition+1}}
//我们正在访问服务中定义的排序数组
{{i+1}}
{{item.username}
{{item.total_points}

U需要根据用户点对列表重新排序，还是需要将此数据存储在不在firebase上的手机上？你能用几句话解释一下你的问题吗，因为你的标题是不使用firebase，而在你的问题中，你问如何在firebase中使用它。我需要显示登录用户的位置（{username}}检索此日期），并在：user you in position XXX中显示它。所以我想要“{username}}你在位置{{position}}”。如果没有firebase，我的意思是我的位置数据不在firebase中。如果模棱两可，我可以改变。我得到了你想要做的：）但不是你面临的困难：）我不知道，用我的代码，如何显示用户的位置。如何使用firebase查询检索这些信息，并创建一个可用于html的变量“position”？我被困在这里（我是一个firebase新手，我没有找到很多有用的指南：（）好的，我开始明白：）你想向你的登录用户显示与其他用户相比的排名（位置），例如你的分数是150，你的rabnking（位置）是3。最后一个问题，您希望在登录用户之间进行比较，还是与所有用户进行比较？非常感谢。我会尽快试一试。：）只有一个问题，服务代码需要位于与rank.ts不同的文件中？欢迎：）不，您可以将其放在同一文件夹中，但如果要继续此服务，需要在页面文件夹的同一级别创建文件夹“services”，并在其中创建用户服务文件，因此，您可以在其他组件中重用此服务谢谢您提供的信息：D我一试用，就会更新您！我在聊天中写了一些问题，我仍然感谢你的帮助，但是代码没有帮助我，因为它不实用，我没有按要求返回它。我用一种简单得多的方法解决了它。

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