为什么 Angular.orderBy 在 Page 中没有显示数据？答案

【问题标题】：Why Angular.orderBy shows no data in Page?为什么 Angular.orderBy 在 Page 中没有显示数据？
【发布时间】：2021-08-15 20:43:50
【问题描述】：

我正在 Firebase Firestore 的帮助下开发一个 Angular 网站。这是我在 Angular 上的第一个项目。我在 2 个月前学习了 Angular。请参阅以下代码：-

组件.html

<section class="rank">
  <p class="records" *ngIf="members.length === 0">No Records Found.</p>
  <div class="text-img" *ngIf="members.length > 0">
    <p class="sb">Best Sulphuric</p>
    <p class="role">Member</p>
    <p class="name">
      {{ members[0].payload.doc.data().name }}
    </p>
  </div>
  <table *ngIf="members.length > 0">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Posts</th>
      <th>Score</th>
    </tr>
    <tr *ngFor="let member of members; let indexOfelement = index">
      <td>{{ indexOfelement + 1 }}</td>
      <td>{{ member.payload.doc.data().name }}</td>
      <td>{{ member.payload.doc.data().posts }}</td>
      <td>{{ member.payload.doc.data().score }}</td>
    </tr>
  </table>
</section>

组件.ts

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-rank',
  templateUrl: './rank.component.html',
  styleUrls: ['./rank.component.scss'],
})
export class RankComponent implements OnInit {
  members: any;
  constructor(public db: AngularFirestore) {
    db.collection('members')
      .snapshotChanges()
      .subscribe((res) => (this.members = res));
  }

  ngOnInit(): void {}
}

当我在浏览器上打开它时，它会显示 Firestore 中成员中的所有数据。但是当我将 component.ts 更改为此 -->

组件.ts

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-rank',
  templateUrl: './rank.component.html',
  styleUrls: ['./rank.component.scss'],
})
export class RankComponent implements OnInit {
  members: any;
  constructor(public db: AngularFirestore) {
    this.members = db.collection('members').ref.orderBy('score');
  }

  ngOnInit(): void {}
}

它在窗口上显示没有数据。你能帮帮我吗？

在此先感谢您的帮助。

【问题讨论】：

标签： javascript angular firebase google-cloud-firestore angularfire2

【解决方案1】：

在第二个版本中，

你错过了

 .snapshotChanges()
   .subscribe((res) => (this.members = res));
  }

在构造函数中。如果没有订阅，Angular 将不会发出任何 HTTP 请求，您的组件也不会收到任何数据。

【讨论】：