Angular / Firestore - 'Where' query returning error 'property does not exist on type AngularFirestoreCollection'

Question

I'm trying to get a specific document from a firestore collection based upon an URL parameter that is passed into the argument, but as I've initialized the collection using expensesCollection: AngularFirestoreCollection<Expense>, the where query is returning the following error:

TS2339: Property 'where' does not exist on type 'AngularFirestoreCollection

The 'ViewExpense' component is accessed after clicking on a datatable row on the 'ExpensesList' component, which passes the expense ID as a parameter, which is used in the where query.

-

expense-list.component.html:

<mat-row *matRowDef="let row; columns: tableColumns" routerLink="/expenses/view/{{row.expenseId}}"></mat-row>

-

view-expense.component.ts:

import { Component, OnInit, Input } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Observable } from 'rxjs/Observable';

import { AngularFireDatabase } from 'angularfire2/database';

import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

import { Expense } from '../expenseModel';

@Component({
  selector: 'app-view-expense',
  templateUrl: './view-expense.component.html',
  styleUrls: ['./view-expense.component.scss']
})

export class ViewExpenseComponent implements OnInit {

  expenseId: any;

  expensesCollection: AngularFirestoreCollection<Expense>;
  expenses: Observable<Expense[]>;

  expense: Observable<Expense>;

  constructor(private db: AngularFirestore, private route: ActivatedRoute) {
    this.route.params.subscribe(params => {
        console.log(params);
        this.expenseId = params.expenseId;
    })

    this.expensesCollection = this.db.collection('/expenses');

    this.expenses = this.expensesCollection.snapshotChanges().map(changes = {
      return changes.map(a => {
        const data = a.payload.doc.data() as Expense;
        data.id = a.payload.doc.id;
        return data;
      })
    })
  }

  ngOnInit() {
    this.getExpense();
  }

  getExpense() {
    /* ---- ERROR HERE ---- */
    this.expense = this.expensesCollection.where('expenseId', '==', this.expenseId);
    console.log('this.expense: ' + this.expense);
  }

}

Ashley Medway · Accepted Answer · 2019-12-27 15:47:28Z

61

There's no where function in AngularFirestoreCollection, instead you should supply the where condition in the second argument of collection(), like this:

this.expensesCollection = this.db.collection('/expenses', ref => ref.where('expenseId', '==', this.expenseId));

Reference: https://github.com/angular/angularfire2/blob/master/docs/firestore/querying-collections.md

Outdated / outright wrong documentation: https://firebase.google.com/docs/firestore/query-data/queries

edited Dec 27, 2019 at 15:47

Ashley Medway

7,3197 gold badges54 silver badges73 bronze badges

answered Mar 8, 2018 at 0:17

Eliran Pe'er

2,6393 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rob Over a year ago

@mikegross The documentation you linked is correct. This is a difference between the AngularFirestore NPM module you are using and the vanilla Firebase JS SDK

Ramsha Khalid Over a year ago

What if I want to have multiple queries?

Santosh Over a year ago

queryDoc=this.collection("Assessment",ref=>ref.where("community.community_id","==",communityId).orderBy('assessment_index', sortOrder).startAfter(lastDocRef).limit(_limit));

you can do like this by concat where.

Collectives™ on Stack Overflow

Angular / Firestore - 'Where' query returning error 'property does not exist on type AngularFirestoreCollection'

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related