How to send a variable to Firestore query in an Angular application

Question

How to send a variable to Firestore query in an Angular application

I'm attempting to retrieve data from a schedule collection based on a field matching the user's id. However, I'm encountering an issue with the error message: "Function Query.where() requires a valid third argument, but it was undefined."

     userId;
     uid;
     sched: Observable<ScheduleModel[]>;

In the ngOnInit()

  ngOnInit() {
    this.userId = this.afAuth.authState.subscribe(user => {
      this.uid = user.uid;
    });
    this.getSched();
  }

getSched() {
  this.sched = this.afs.collectionGroup<ScheduleModel>('schedule', ref => ref.where('uid', '==', this.uid)).valueChanges();
}

The issue seems to be with this.uid in the query, however:

When I manually input the actual user uid 'iq6DkETjgMSMIdxw9cvLEzbf9Fr2' instead of using this.uid, it works.
In my template file, {{ uid }} displays the correct id, confirming that it is not actually undefined. https://i.sstatic.net/jXOBh.png

angular typescript firebase

Answer 1

Answer №1

Here's a helpful tip

When initializing the component, make sure to assign 'this' to a variable like 'self' to ensure scope consistency. See example below:

ngOnInit() {
let self = this;
this.userId = this.afAuth.authState.subscribe(user => {
  self.uid = user.uid;
});
this.getSched();
}

Remember that using 'this' in your code might not always refer to the same scope as intended. Keep track of which variables are within the correct context, especially when referencing them in templates.

Answer 2

Here's a helpful tip

When initializing the component, make sure to assign 'this' to a variable like 'self' to ensure scope consistency. See example below:

ngOnInit() {
let self = this;
this.userId = this.afAuth.authState.subscribe(user => {
  self.uid = user.uid;
});
this.getSched();
}

Remember that using 'this' in your code might not always refer to the same scope as intended. Keep track of which variables are within the correct context, especially when referencing them in templates.

Answer 3

Answer №2

 let userLoggedIn = this.afAuth.authState.subscribe(user => {
    this.userId = user.uid;
    **this.scheduleCollection = this.afs.collectionGroup<ScheduleModel>('schedule', ref => ref.where('uid', '==', this.userId)).valueChanges();
  });

After moving the assignment of **this.scheduleCollection, everything started working smoothly.

Answer 4

 let userLoggedIn = this.afAuth.authState.subscribe(user => {
    this.userId = user.uid;
    **this.scheduleCollection = this.afs.collectionGroup<ScheduleModel>('schedule', ref => ref.where('uid', '==', this.userId)).valueChanges();
  });

After moving the assignment of **this.scheduleCollection, everything started working smoothly.

How to send a variable to Firestore query in an Angular application

Answer №1

Answer №2

Similar questions

Transfer information to a form using the <mat-select> element

typescript in conjunction with nested destructuring

Retrieving data from Node.js within an Angular application

The WebElement can be identified using cssSelector or xpath in the web browser. It may not be null, but it is also not present, clickable, or enabled

Implement dynamic routerLink binding with Angular 11

"Slow loading times experienced with Nextjs Image component when integrated with a map

Issues with eventEmitter functionality in Angular 2

Cannot assign type void to 'Intrinsic Attributes & Dispatch<SetStateAction<>>'

Issue: Multiplying values within an array in TypeScript requires that the left-hand side of the arithmetic operation must be of type 'any', 'number', or 'enum'

Unleashing the Power of RXJS: Discovering the Magic of connecting Events and Tapping into Executions with retrywhen

Tips for Providing a Generic Type to a Component Imported Using Next.js Dynamic

Having trouble accessing a class variable in Angular 8 that is defined inside the FileReader's onloadend method?

The system encountered a TypeError: Unable to access the 'nativeElement' property as it is undefined

Steps for managing files in Ionic Native: creating, reading, and writing them

I encountered an issue with my TypeScript function in Angular, as it is unable to process multiple uploaded files

Error message: Angular 2's NgFor directive can only bind to iterable data types like Arrays

The issue of cyclical dependencies in Ionic 2 and Angular 2

When working with data in Angular, make sure to use any[] instead of any in app.component.html and app.component.ts to avoid causing overload errors

Can you explain the distinction between the navigate function and routerLink feature in Angular 2?

Should the RxJS interval() function be employed to receive live server updates?