调整AngularFireList排序：让Firebase最新数据显示在顶部

我来帮你搞定这个问题！要让最新的答案显示在列表顶部，其实有两种常用的方案，你可以根据自己的场景选择：

方案一：结合Firebase查询+RxJS反转（推荐大数据量场景） #

如果你的每条answer数据里有createdAt时间戳字段（建议用Firebase服务器时间生成，避免客户端时间偏差），可以先在Firebase查询时按时间戳排序，再通过RxJS反转数组让最新项在前：

1. 修改构造函数代码 #

import { map } from 'rxjs/operators';

// ... 其他导入
constructor(private afAuth: AngularFireAuth, private db: AngularFireDatabase, public authService: AuthService, private router: Router) {
  const uid = this.afAuth.auth.currentUser.uid;
  const path = `users/${uid}/answers`;
  // 按createdAt升序查询（最新的在最后），再用RxJS反转数组
  this.answersRef = this.db.list(path, ref => ref.orderByChild('createdAt'));
  this.allMyAnswers = this.answersRef.valueChanges().pipe(
    map(answers => answers.reverse())
  );
}

2. 给createdAt添加索引（优化性能） #

为了让Firebase查询更高效，需要在数据库规则里给createdAt字段添加索引：

{
  "rules": {
    "users": {
      "$uid": {
        "answers": {
          ".indexOn": "createdAt"
        }
      }
    }
  }
}

3. 确保添加数据时包含createdAt #

当你新增answer的时候，记得带上服务器时间戳：

addAnswer(answerContent: string) {
  this.answersRef.push({
    content: answerContent,
    createdAt: firebase.database.ServerValue.TIMESTAMP
  });
}

方案二：前端直接反转数组（适合小数据量场景） #

如果你的数据量不大，或者不想额外添加时间戳字段，可以直接在拿到数据后反转数组：

import { map } from 'rxjs/operators';

// ... 其他导入
constructor(private afAuth: AngularFireAuth, private db: AngularFireDatabase, public authService: AuthService, private router: Router) {
  const uid = this.afAuth.auth.currentUser.uid;
  const path = `users/${uid}/answers`;
  this.answersRef = this.db.list(path);
  // 直接反转数组，让最新的项排在前面
  this.allMyAnswers = this.answersRef.valueChanges().pipe(
    map(answers => answers.reverse())
  );
}

模板使用不变 #

不管用哪种方案，模板里的*ngFor写法保持原样即可：

<div *ngFor="let answer of allMyAnswers | async">
  <!-- 你的answer内容展示 -->
  {{ answer.content }}
</div>

内容的提问来源于stack exchange，提问作者parvaneh