如何在 Angularfire2 Angular2 中对 FirebaseListObservable 列表进行排序？

Posted 2023-03-13

【中文标题】如何在 Angularfire2 Angular2 中对 FirebaseListObservable 列表进行排序？

【英文标题】：How can I sort a FirebaseListObservable list in Angularfire2 Angular2?

【发布时间】：2017-01-01 04:10:15

【问题描述】：

我想从 Firebase 实时数据库中获取所有用户并按分数属性对他们进行排序。我可以使用变量users: FirebaseListObservable<any[]>; 但我得到了错误：

Type 'Observable<any[]>' is not assignable to type 'FirebaseListObservable<any[]>'.
Property '_ref' is missing in type 'Observable<any[]>'.

如果我将变量更改为users: Observable<any[]>; 然后错误消失了，但是我不能使用像.push()和.update()这样的Angularfire方法。

我的获取和排序代码（有效）如下所示：

this.users = this.af.database.list('/users')
  .map(items => items.sort((a, b) => b.score - a.score));

对于如何避免错误或任何首选方式的任何建议，我将不胜感激，谢谢！

【参考方案1】：

FirebaseListObservable 实现了 lift，因此 RxJS 运算符（如 map）将返回一个 FirebaseListObservable 实例。

只是 - 在使用 TypeScript 时 - RxJS 运算符是静态类型化的以返回 Observable，因此您必须强制转换为 FirebaseListObservable。 （使用 RxJS 不必涉及 TypeScript，如果您查看 the guidance for adding operators，您会发现没有提及类型。）

您可以通过查找您在问题中提到的push 和update 函数来验证是否返回了FirebaseListObservable 实例：

this.users = this.af.database
  .list('/users')
  .map(items => items.sort((a, b) => b.score - a.score)) as FirebaseListObservable<any[]>;
console.log(this.users.push.toString());
console.log(this.users.update.toString());

但是请注意，这不适用于作为查询创建的 FirebaseListObservable 实例。对于此类情况，有一个 as-yet-unanswered question。

【讨论】：

@LindsayWard 这是在客户端完成的。对于大量数据，您可能希望在服务器端进行排序。 Angularfire2 支持list() 中的第二个参数进行排序。

谢谢@Sam。很高兴知道。我也会尝试一下，看看是否有任何不同。

我收到以下错误：[ts] Property 'map' does not exist on type 'FirebaseListObservable<any[]>'. 有什么想法吗？我正在使用："angularfire2": "^2.0.0-beta.7-pre", 和 "firebase": "^3.6.4", 更多详细信息：***.com/questions/41550132/…

@sam 我在查询参数中添加了 sortBy。如何指定排序 - desc 或 asc？

@Sam，我可以在 list() 的第二个参数中使用任何排序函数吗？你能看看这个问题***.com/q/50112214/4299527吗？

【参考方案2】：

你需要这个例子。要观看其他选项，请参阅Query 接口。

this.items = angularFire.database.list('/users', 
  query: 
    orderByChild: 'childPropertyName'
  
);

export interface Query 
    [key: string]: any;
    orderByKey?: boolean | Observable<boolean>;
    orderByPriority?: boolean | Observable<boolean>;
    orderByChild?: string | Observable<string>;
    orderByValue?: boolean | Observable<boolean>;
    equalTo?: any | Observable<any>;
    startAt?: any | Observable<any>;
    endAt?: any | Observable<any>;
    limitToFirst?: number | Observable<number>;
    limitToLast?: number | Observable<number>;

【讨论】：

错误：Argument of type ' query: orderByChild: string; ; ' is not assignable to parameter of type 'QueryFn'. Object literal may only specify known properties, and 'query' does not exist in type 'QueryFn'