Encountering a mistake that can be assigned to a type parameter

Question

Encountering a mistake that can be assigned to a type parameter

Within the code block below, I am utilizing "rxjs": "~6.2.0"

    canActivate():Observable<boolean>
     {
      return this.auth.user$.pipe
      (
        switchMap( 
                 user => 
                   {
                   return this.userService.get(user.uid);
                   }
                 )
       ).pipe( map( appUser => appUser.isAdmin))
     }

The get method within userService contains the following logic.

    get(uid : string): AngularFireObject<AppUser>
      {
        return this.db.object('/users/'+ uid);
      }

A specific error is being encountered

"Argument of type '(user: User) => AngularFireObject' is not assignable to parameter of type '(value: User, index: number) => ObservableInput'. Type 'AngularFireObject' is not assignable to type 'ObservableInput'. Type 'AngularFireObject' is not assignable to type 'Iterable'. Property '[Symbol.iterator]' is missing in type 'AngularFireObject'."

angular typescript rxjs

Answer 1

Answer №1

Ensure that you do not need to use two pipes in this scenario, instead, map the outcome of appUser.isAdmin using a single pipe.

canActivate():Observable<boolean>
{
      return this.auth.user$
       .pipe(
           switchMap(user => this.userService.get(user.uid)),
           map(appUser => appUser.isAdmin)
       )
}

Furthermore, it is recommended to adjust userService.get() to return an appropriate Observable obtained from valueChanges().

get(uid : string): Observable<any>
{
     return this.db.object('/users/'+ uid).valueChanges();
}

Answer 2

Ensure that you do not need to use two pipes in this scenario, instead, map the outcome of appUser.isAdmin using a single pipe.

canActivate():Observable<boolean>
{
      return this.auth.user$
       .pipe(
           switchMap(user => this.userService.get(user.uid)),
           map(appUser => appUser.isAdmin)
       )
}

Furthermore, it is recommended to adjust userService.get() to return an appropriate Observable obtained from valueChanges().

get(uid : string): Observable<any>
{
     return this.db.object('/users/'+ uid).valueChanges();
}

Answer 3

Answer №2

The function argument passed into SwitchMap needs to be an Observable, however, the return value of this.userService.get(user.uid) is an AngularFireObject<AppUser>.

AngularFireObject comes from AngularFire library. I am not familiar with AngularFire, but it seems like you need to use valueChanges() method on the AngularFireObject to get an Observer. So if possible, update the UserService method as shown below:

get(uid : string): Observable<AppUser>
{
    return this.db.object('/users/'+ uid).valueChanges();
}

Also, make sure to combine the switchMap and map operators in the same pipe, and simplify the arrow function within switchMap as suggested by Amit Chigadani.

Answer 4

The function argument passed into SwitchMap needs to be an Observable, however, the return value of this.userService.get(user.uid) is an AngularFireObject<AppUser>.

AngularFireObject comes from AngularFire library. I am not familiar with AngularFire, but it seems like you need to use valueChanges() method on the AngularFireObject to get an Observer. So if possible, update the UserService method as shown below:

get(uid : string): Observable<AppUser>
{
    return this.db.object('/users/'+ uid).valueChanges();
}

Also, make sure to combine the switchMap and map operators in the same pipe, and simplify the arrow function within switchMap as suggested by Amit Chigadani.

Encountering a mistake that can be assigned to a type parameter

Answer №1

Answer №2

Similar questions

Using Typescript generics to deduce the type from the second parameter for utilization in the first slot

Troubleshooting common issues while setting up React Native with TypeScript

Saving JSON Data in a Variable using Angular 2

Is there a way for me to bypass adding the label if it already exists in my state, but still include the new value?

In the realm of JavaScript, the localeCompare() string method is more than willing to accept the presence of 'undefined' as a valid parameter for 'locale', while opting to outright reject any instance of

The default values for CSS filters

How can you determine the data types of properties within a blank class object using Typescript and Angular?

How can I dynamically insert various FormGroup instances into a FormArray in Angular?

Is it possible to create two subclasses where the methods return the types of each other?

Step-by-step guide on transitioning code to utilize @use instead of @import

Determining type properties dynamically depending on the value of another property

The attribute 'date' is not found within the class 'EmployeeScheduleExceptionModel', however, it is present in the parent class from which it inherits

Is there any distinction between using glob wildcards in the tsconfig.json file when specifying "include" as "src" versus "include" as "src/**/*"?

How can I customize ngx-quill editor's link behavior to open in the same tab instead of a new tab?

Unable to set items as sticky within mat-tabs

Asserting types for promises with more than one possible return value

What causes a BehaviorSubject to update when modifying the [(NgModel)] values of a form without actually submitting the form?

Angular2 ngIf directive issue after initial button click

The process of ordering awaits using an asynchronous method

Using AngularFire2 to manage your data services?