CODEWITHSUNDEEP
rxjsangularfire2angular6rxjs6
eat-sleep-code
eat-sleep-code

Reputation: 4855

Was there a recent breaking change in RXJS?

I have the following code in Angular 6, that worked fine before. 

 getNavigation(db): any {
    return db.list('/pages', ref => {
        let query = ref.limitToLast(100).orderByChild('sortOrder');
        return query;
    }).snapshotChanges().map(changes => {
        return changes.map(change => ({key: change.payload.key, ...change.payload.val()}));
    });
}

Suddenly, with some recent library update (rxjs ??) it throws an error? What syntax has changed that suddenly broke my code?

ERROR TypeError: db.list(...).snapshotChanges(...).map is not a function at NavigationComponent.push../src/app/navigation.component.ts.NavigationComponent.getNavigation

Or more importantly, how do I fix it? :-(

Upvotes: 0

Views: 345

Answers (2)

eat-sleep-code
eat-sleep-code

Reputation: 4855

Ok, finally figured this out.

Here is the working code for anyone who runs into a similar problem:

import { Component } from '@angular/core';
import { Observable}  from 'rxjs';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { map } from 'rxjs/operators';
import { LogoComponent } from './logo.component';

@Component({
    selector: 'app-navigation',
    templateUrl: './navigation.component.html'
})


export class NavigationComponent {
    items: Observable<any[]>;
    childItems: Observable<any[]>;

    constructor(db: AngularFireDatabase) {
        this.items = this.getNavigation(db);
        this.childItems = this.getNavigation(db);
    }

    getNavigation(db: AngularFireDatabase): any {
        return db.list('/pages', ref => {
            let query = ref.limitToLast(100).orderByChild('sortOrder');
            return query;
        }).snapshotChanges().pipe(
            map(pages => {
                return pages.map(p => ({ key: p.key, ...p.payload.val() }));
            })
        );
    }
}

To get past the typescript error, I had to type the db parameter of getNavigation.

Then I had to remove the unnecessary subscribe function that was shown in both the feedback to this question and in AngularFire's migration documents. While this might be necessary in some use cases, it was not in mine.

Upvotes: 1

siva636
siva636

Reputation: 16441

Pipe the map operator:

getNavigation(db): any {
    return db.list('/pages', ref => {
        let query = ref.limitToLast(100).orderByChild('sortOrder');
        return query;
    }).snapshotChanges().pipe(
map(changes => {
        return changes.map(change => ({key: change.payload.key, ...change.payload.val()}));
    }));
}

Also make sure you import map in the correct way:

import {map} from 'rxjs/operators';

Upvotes: 3

Related Questions