"AngularFirestoreCollection"类型上不存在属性"orderBy" - 打字稿

在使用 Angular 和 AngularFirestoreCollection 进行开发时，如果你遇到了以下错误信息：

"AngularFirestoreCollection"类型上不存在属性"orderBy"<DocumentData>

这意味着你正试图在 AngularFirestoreCollection 上使用 orderBy 方法，但该方法并不存在。

问题描述

AngularFirestoreCollection 是 Angular 中用于访问云端 Firestore 数据库集合的类。它允许你对集合进行 CRUD 操作，并获取实时或静态的数据。然而，在这个特定的错误中，你尝试使用 orderBy 方法对集合进行排序，但却无法找到该方法。

原因

AngularFirestoreCollection 类没有内置的 orderBy 方法。相反，它使用 AngularFirestore 类中的方法来执行排序操作。

解决方案

要对 AngularFirestoreCollection 中的数据进行排序，你需要使用 AngularFirestore 类的方法。下面是一些常见的示例代码，展示了如何对集合数据进行排序：

升序排序

import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

export class YourComponent {
  collection: AngularFirestoreCollection<YourData>;
  sortedCollection: Observable<YourData[]>;

  constructor(private afs: AngularFirestore) {
    this.collection = afs.collection<YourData>('your-collection');
    this.sortedCollection = this.collection.valueChanges({idField: 'id'}).pipe(
      map(arr => arr.sort((a, b) => a.fieldToSort.localeCompare(b.fieldToSort)))
    );
  }
}

在上述示例中，我们使用 valueChanges 方法来订阅集合的更改。然后我们使用 map 操作符和 JavaScript 的 sort 方法来对数组进行排序。你需要将 fieldToSort 替换为你想要排序的实际字段名。

降序排序

如果你想降序排序数据，只需在排序函数中交换 a 和 b 的位置即可：

map(arr => arr.sort((a, b) => b.fieldToSort.localeCompare(a.fieldToSort)))

使用 query 方法排序

另一种对集合进行排序的方法是使用 query 方法。这个方法允许你在获取数据时指定排序规则。

import { AngularFirestore, QueryFn } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

export class YourComponent {
  collection: AngularFirestoreCollection<YourData>;
  sortedCollection: Observable<YourData[]>;

  constructor(private afs: AngularFirestore) {
    const queryFn: QueryFn = ref => ref.orderBy('fieldToSort');
    this.collection = afs.collection<YourData>('your-collection', queryFn);
    this.sortedCollection = this.collection.valueChanges({idField: 'id'});
  }
}

在此示例中，我们创建了一个名为 queryFn 的函数，并在其中使用 ref.orderBy('fieldToSort') 方法指定了排序规则。然后我们在创建 AngularFirestoreCollection 实例时传递这个函数。

结论

在使用 AngularFirestoreCollection 进行开发时，如果遇到 "AngularFirestoreCollection"上不存在属性 "orderBy" 的错误，这意味着你正在尝试使用该不存在的方法。要对集合数据进行排序，使用 AngularFirestore 类中的方法，如 sort、orderBy 和 query。以上示例代码提供了如何对集合进行排序的基本示例和用法建议。记得根据你的具体需求调整代码，并替换示例代码中的字段和集合名称。