如何在角度Typescript中订购FireStore集合

Question

I am using Firestore in angular, I would like to show a collection ordered by an attribute pos , I have no issue with importing the collection but I have no idea how to order it.

I tried to follow some tutorial which uses the function orderBy('pos') but the console return me :

ERROR TypeError: this.competence.orderBy is not a function
    at FirebaseService.fireBaseRequest (main.js:401)
    at FirebaseService.getCompetence (main.js:405)
    at HomePageComponent.getComp (main.js:298)
    at HomePageComponent.ngOnInit (main.js:305)
    at checkAndUpdateDirectiveInline (vendor.js:87496)
    at checkAndUpdateNodeInline (vendor.js:98156)
    at checkAndUpdateNode (vendor.js:98095)
    at prodCheckAndUpdateNode (vendor.js:98949)
    at Object.eval [as updateDirectives] (ng:///AppModule/Home…ost.ngfactory.js:10)
    at Object.updateDirectives (vendor.js:98569)
defaultErrorLogger  @   vendor.js:70180

My firebase.service :

import {Injectable} from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {AngularFirestore} from '@angular/fire/firestore';


@Injectable({
  providedIn: 'root'
})

export class FirebaseService {


  competence;

  constructor(private firestore: AngularFirestore) {
  }

  fireBaseRequest(path) {
    this.competence = this.firestore.collection(path);
    this.competence = this.competence.orderBy('pos').get();
    return this.firestore.collection(path).snapshotChanges();


  getFormation() {
    return this.fireBaseRequest('formations');
  }
  }

}

My component Html :

      <!--      Formation-->
      <mat-card *ngFor="let formation of filterBy('pos') " class="mb-3">
        <mat-card-title>
          {{formation.payload.doc.data().titre}}
        </mat-card-title>
        <mat-card-subtitle>
          {{formation.payload.doc.data().lieu}}
          <p>{{formation.payload.doc.data().date}}</p>
        </mat-card-subtitle>
        <mat-card-content>
          {{formation.payload.doc.data().description}}
        </mat-card-content>


      </mat-card>

My component ts :

import {Component, OnInit} from '@angular/core';
import {FirebaseService} from '../services/firebase.service';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
  competence;
  formations;


  getComp = () =>
    this.firebaseService
      .getCompetence()
      .subscribe(res => (this.competence = res));

  getFormation = () =>
    this.firebaseService
      .getFormation()
      .subscribe(res => (this.formations = res));


  constructor(private firebaseService: FirebaseService) {
  }

  ngOnInit() {
    this.competence = this.getComp();
    this.formations = this.getFormation();
    if (window.innerWidth < 768) {
      this.cols = '4';
      this.rowHeight = '4:5';
    }

  }

Answer 1

Try like this:

My firebase.service :

this.competence = this.firestore.collection(path, ref => ref.orderBy('pos'));

or sort in component.

My component ts :

 getComp = () =>
    this.firebaseService
      .getCompetence()
      .subscribe(res => (this.competence = this.sortArrayByKey(res,'pos'));

and add sortArrayByKey function:

sortArrayByKey(Array:any[], Key:string) {
    return Array.sort(function (a, b) {
      return a[Key] - b[Key];
    });
}