为什么 Angular.orderBy 页面没有数据？

Question

I am developing a Angular website with help of Firebase Firestore. It is my first project on Angular. I have learned Angular 2months ago. Please See the below codes: -

Component.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>

Component.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 {}
}

When I open this on browser this shows all the data in members in Firestore. But when i change component.ts to this -->

Component.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 {}
}

It shows no data on window. Can you help me please?

Thanks in Advance for Helping.

Answer 1

In the second version,

You are missing the

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

inside the constructor. Without the subscribe, Angular will not make any HTTP Requests and your component will not receive any data.