Angular 4 Firebase angularfire 按值对列表进行排序

Posted 2023-03-13

【中文标题】Angular 4 Firebase angularfire 按值对列表进行排序

【英文标题】：Angular 4 Firebase angularfire Sorting a list by value

【发布时间】：2018-01-13 09:57:20

【问题描述】：

我正在使用 Angular 4 Firebase 和 AngularFire，并且我有以下 firebase 数据库

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

我阅读了 firebase 和 AngularFire 的文档，我想获取这些数据 作为按总分排序的列表。我尝试了AngularFire link 给出的所有可能方法，但没有任何帮助。我目前得到的代码工作正常，但它没有对列表进行排序。

import  Component, OnInit  from '@angular/core';
import  AngularFireDatabase, FirebaseListObservable  from 'angularfire2/database';

@Component(
  selector: 'app-homefiller',
  templateUrl: './homefiller.component.html',
  styleUrls: ['./homefiller.component.css']
)

export class HomefillerComponent implements OnInit 
  topusers: FirebaseListObservable<any>;
  totalscore;
  list;
  constructor(db: AngularFireDatabase) 


        this.topusers = db.list('users', 
        query: 
         orderByValue: true,
         limitToFirst: 10,
        
        );
   

  ngOnInit() 
  

你能帮我把我的列表排序吗

“总分：”

或者告诉我是否可以这样做？ ?

【参考方案1】：

orderByValue 用于当您有这样的数据结构时：

"userscores" : 
    "Test1" : 50,
    "Test2" : 30,
    "Test3" : 20
    "Test4" : 10,

在上面，您希望对userscores 上每个子节点的值的查询结果进行排序。

在您的情况下，您要排序的值位于users 下的子属性totalscore 中。所以你应该使用 orderByChild:

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

【讨论】：

啊，非常感谢你这个工作！它从小到大获取列表，我更喜欢相反有什么办法可以反转它？？

Firebase 始终按升序返回项目。两个选项是：1）反转结果客户端，2）存储反转值以进行查询。分别见this answer和this answer。