Map operator. Different function types and accessor

Question

i have recently updated Firebase and AngularFire2 in my Ionic project

Versions:

Firebase: 5.0.3
AngularFire2: 5.0.0-rc.10
rxjs 6.2.0

now I tried to upgrade the project from the regular map to pipe using the migration guide: Migration guide AngularFire2 version5

But if i use exact the same example for the following code block:

    ///my code
    let dataBaseCollection = this.store.collection('items').snapshotChanges().pipe(
    map(actions => 
    actions.map(a => ({ key: a.key, ...a.payload.val() }))
    )
    ).subscribe(items => {
       return items.map(item => item.key);
   });

    ///example

    afDb.list('items').snapshotChanges().pipe(
    map(actions => 
      actions.map(a => ({ key: a.key, ...a.payload.val() }))
    )
  )

I get the following exceptions:

Argument of type 'OperatorFunction' is not assignable to parameter of type 'UnaryFunction, Observable<{ const: string; return: any; }[]>>'.

Types of parameters 'source' and 'source' are incompatible.

Type 'Observable' is not assignable to type 'Observable'. Two different types with this name exist, but they are unrelated.

Property 'source' is protected in type 'Observable' but public in type 'Observable'.

I already tried the two different operator from rxjs

import { map } from 'rxjs/operators'; import { map } from 'rxjs/operators/map';

I appreciate any help.

Your code seems different from the example. In the example pipe() is followed with .subscribe() where the return is located. — André Kool
Good that you mentioned it. I also tried this just to be sure. But I still get the same error. I will quickly edit my code to be more like the example. — Benjamin Schröder

Fabricio Fabricio · Accepted Answer · 2018-05-23T11:14:53

Well, I don't know if this is the issue, but a few observations:

let dataBaseCollection is receiving a Subscription from .subscribe and not the items. You cannot return inside the subscribe, so your code should be just this:

let dataBaseCollection = this.store.collection('items').snapshotChanges().pipe(
    map(actions => actions.map(a => ({ key: a.key, ...a.payload.val() })))
)

If you want to map only the keys then just do:

let dataBaseCollection = this.store.collection('items').snapshotChanges().pipe(
    map(actions => actions.map(a => a.key))
)

Map operator. Different function types and accessor

2 Answers