title: Why Angular.orderBy shows no data in Page?
body: <p>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: -</p>
  <blockquote>
  <p>Component.html</p>
  </blockquote>
  <pre><code>&lt;section class=&quot;rank&quot;&gt;
    &lt;p class=&quot;records&quot; *ngIf=&quot;members.length === 0&quot;&gt;No Records Found.&lt;/p&gt;
    &lt;div class=&quot;text-img&quot; *ngIf=&quot;members.length &gt; 0&quot;&gt;
      &lt;p class=&quot;sb&quot;&gt;Best Sulphuric&lt;/p&gt;
      &lt;p class=&quot;role&quot;&gt;Member&lt;/p&gt;
      &lt;p class=&quot;name&quot;&gt;
        {{ members[0].payload.doc.data().name }}
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;table *ngIf=&quot;members.length &gt; 0&quot;&gt;
      &lt;tr&gt;
        &lt;th&gt;ID&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Posts&lt;/th&gt;
        &lt;th&gt;Score&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr *ngFor=&quot;let member of members; let indexOfelement = index&quot;&gt;
        &lt;td&gt;{{ indexOfelement + 1 }}&lt;/td&gt;
        &lt;td&gt;{{ member.payload.doc.data().name }}&lt;/td&gt;
        &lt;td&gt;{{ member.payload.doc.data().posts }}&lt;/td&gt;
        &lt;td&gt;{{ member.payload.doc.data().score }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/section&gt;
  
  </code></pre>
  <blockquote>
  <p>Component.ts</p>
  </blockquote>
  <pre><code>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) =&gt; (this.members = res));
    }
  
    ngOnInit(): void {}
  }
  
  </code></pre>
  <p>When I open this on browser this shows all the data in members in Firestore. But when i change component.ts to this --&gt;</p>
  <blockquote>
  <p>Component.ts</p>
  </blockquote>
  <pre><code>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 {}
  }
  
  
  </code></pre>
  <p>It shows no data on window. Can you help me please?</p>
  <p><strong>Thanks in Advance for Helping.</strong></p>