基于angularfirestore集合中的子集合的字段值进行搜索

Question

Trying to search in a list based on the name field of firebase database using angularfirestore. It does not even show any error in console. the result returning from the code in service is an empty array. I filtered and map the payload data in constructor to get the async and access the nested objects in the database

list.html:

    <input type="search" 
          class="form-control"
          [(ngModel)]="searchValue"
          [ngModelOptions]="{standalone: true}"
          (keyup)="searchMasjid()"
          placeholder="Name...">
  <div *ngIf="masjids$ | async; let masjids; else loading">
    <div class="card mb-1" *ngFor="let masjid of masjids">
      <div class="card-body d-flex justify-content-between">
        <div>
          <h5 class="mb-1">{{masjid.masjidInfo.jagah}}-{{masjid.masjidInfo.name}}</h5>
          <small>{{masjid.masjidInfo.address}}</small>
        </div>

list.ts:

export class MasjidListComponent{
  public masjids$: Observable<IMasjid[]>;
  masjids : Array<any>;
  searchValue: string = "";
  filterMasjidName: Array<any>;

  constructor(public firebaseService: FirebaseService, 
              public af: AngularFirestore){
                this.masjids$ = this.af.collection('masjids').snapshotChanges().pipe(
                  map( actions => actions.map(masjid => {
                    let data = masjid.payload.doc.data() as IMasjid;
                    let id = masjid.payload.doc.id;
                    return { id, ...data };
                  }))
                )
              }

  searchMasjid(){
    let value = this.searchValue;
    this.firebaseService.searchMasjids(value).subscribe(
     result => {
        this.filterMasjidName = result;
        this.masjids = this.combineMasjids(result, this.filterMasjidName)
     } 
    )
  }

  combineMasjids(a, b){
    let result = [];
    a.filter(x => {
      return b.filter(x2 =>{
        if(x2.payload.doc.id == x.payload.doc.id){
          result.push(x2);
        }
      });
    });
    return result;
  }
}

service.ts:

searchMasjids(searchValue){
    return this.db.collection('masjids.masjidInfo', 
    ref=>ref.where('name', '>=', searchValue)
    .where('name', '<=', searchValue + '\uf8ff')).snapshotChanges()
  }
}

Answer 1

As far as I can see, your searchMasjids method is already consuming the results, since it calls snapshotChanges() . This means that the caller of searchMasjids gets back a QuerySnapshot , while it's actually expecting a Query .

You should instead return the collection/query:

searchMasjids(searchValue){
    return this.db.collection(
      'masjids.masjidInfo', 
      ref => ref.where('name', '>=', searchValue)
                .where('name', '<=', searchValue + '\uf8ff')
    )
  }
}