updateing .snapshotChanges() code to use angularfire2 5.0..0 rc-8, firebase 5.0.2

1
votes

I have successful update angularfire 5.0.0.rc 8 and firebase 5.0.2 with no error module. I guess last thing i have to do is to change this code to retrieve all data

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular/navigation/ionic-page';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import { Note } from '../../model/note/note.model';
import { NoteListService } from '../../services/note-list.service';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  noteList: Observable<Note[]>

  constructor(public navCtrl: NavController, private noteListService: NoteListService) {
    this.noteList = this.noteListService.getNoteList()
      .snapshotChanges()
      .map(
        changes => {
          return changes.map(c => ({
            key: c.payload.key, ...c.payload.val()
          }))
        });
  }
}

file for noteListService...

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Note } from '../model/note/note.model';

@Injectable()
export class NoteListService {

    private noteListRef = this.db.list<Note>('note-list');

    constructor(private db: AngularFireDatabase) { }

    getNoteList() {
        return this.noteListRef;
    }

    addNote(note: Note) {
        return this.noteListRef.push(note);
    }

    updateNote(note: Note) {
        return this.noteListRef.update(note.key, note);
    }

    removeNote(note: Note) {
        return this.noteListRef.remove(note.key);
    }
}

Help to changs this code that will compatable with my new version angularfire 5.0.0 rc 8 and firebase 5.0.2

this is a new error after half of my code is working.. Insert part. But still i am not able to query

Runtime Error
Uncaught (in promise): TypeError: this.noteListService.getNoteList(...).snapshotChanges(...).map is not

a function TypeError: this.noteListService.getNoteList(...).snapshotChanges(...).map is not a function at new HomePage (http://localhost:8100/build/0.js:86:14) at createClass (http://localhost:8100/build/vendor.js:10575:20) at createDirectiveInstance (http://localhost:8100/build/vendor.js:10458:20) at createViewNodes (http://localhost:8100/build/vendor.js:11680:36) at createRootView (http://localhost:8100/build/vendor.js:11594:5) at callWithDebugContext (http://localhost:8100/build/vendor.js:12629:25) at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/vendor.js:12116:12) at ComponentFactory_.create (http://localhost:8100/build/vendor.js:9938:29) at ComponentFactoryBoundToModule.create (http://localhost:8100/build/vendor.js:3914:29) at NavControllerBase._viewInit (http://localhost:8100/build/vendor.js:49286:44) Stack Error: Uncaught (in promise): TypeError: this.noteListService.getNoteList(...).snapshotChanges(...).map is not a function

2
angularfirebaseionic3angularfire2
without the exact error we can't help you. Put your question on hold until you are able to post the exact error - devpato
UPDATED ERROR.. ARE YOU RUNNING rc.8 version of angularfire2 - Biswajit
You need to share full code involved into this. Like what is in this one: this.noteListService.getNoteList() - Sergey Rudenko
please help me ;(. i am been stuck with those ionic error since 4 days. and this is the last one - Biswajit

2 Answers

5
votes

You have not correctly imported the map operator from rxjs, also as of rxjs 6 you need to use pipe.

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

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  noteList: Observable<Note[]>

  constructor(public navCtrl: NavController, private noteListService: NoteListService) {
    this.noteList = this.noteListService.getNoteList()
      .snapshotChanges()
      .pipe(
        map(changes => 
          changes.map(c => ({
            key: c.payload.key, ...c.payload.val()
          }))
        })
      );
  }
}
3
votes

Every thing is working fine with new version angularfire v 5.0.0-rc.9

This is the code for retrieving the data from firebase.

import { Component, Injectable } from '@angular/core';
/*import { NavController } from 'ionic-angular';*/
import { IonicPage } from 'ionic-angular/navigation/ionic-page';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Note } from '../../model/note/note.model';

@Injectable()
@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  itemsRef: AngularFireList<any>;
  items: Observable<Note[]>;
  constructor(db: AngularFireDatabase) {
    this.itemsRef = db.list('note-list');
    this.items = this.itemsRef.snapshotChanges().pipe(
       map(changes =>
         changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
      )
    );
  }
}

https://github.com/bnayak0225/Biswajit-Note-Ionic-Firebase-angularfire2-5.0.0-rc-9