更新 .snapshotChanges() 代码以使用 angularfire2 5.0..0 rc-8、firebase 5.0.2

Posted 2023-02-19

【中文标题】更新 .snapshotChanges() 代码以使用 angularfire2 5.0..0 rc-8、firebase 5.0.2

【英文标题】：updateing .snapshotChanges() code to use angularfire2 5.0..0 rc-8, firebase 5.0.2

【发布时间】：2018-10-27 12:25:42

【问题描述】：

我已成功更新 angularfire 5.0.0.rc 8 和 firebase 5.0.2，没有错误模块。我想我要做的最后一件事是更改此代码以检索所有数据

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()
          ))
        );
  

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);
    

帮助更改与我的新版本 angularfire 5.0.0 rc 8 和 firebase 5.0.2 兼容的代码

这是我的一半代码正常工作后出现的新错误。插入部分。 但我仍然无法查询

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

函数类型错误： this.noteListService.getNoteList(...).snapshotChanges(...).map 不是 新主页 (http://localhost:8100/build/0.js:86:14) 上的功能 createClass (http://localhost:8100/build/vendor.js:10575:20) 在 创建指令实例 (http://localhost:8100/build/vendor.js:10458:20) 在 createViewNodes (http://localhost:8100/build/vendor.js:11680:36) 在 createRootView (http://localhost:8100/build/vendor.js:11594:5) 在 callWithDebugContext (http://localhost:8100/build/vendor.js:12629:25) 在 Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/vendor.js:12116:12) 在 ComponentFactory_.create (http://localhost:8100/build/vendor.js:9938:29) 在 ComponentFactoryBoundToModule.create (http://localhost:8100/build/vendor.js:3914:29) 在 NavControllerBase._viewInit (http://localhost:8100/build/vendor.js:49286:44) 堆 错误：未捕获（承诺）：TypeError：this.noteListService.getNoteList(...).snapshotChanges(...).map 不是 一个函数

【问题讨论】：

如果没有确切的错误，我们无法帮助您。暂停您的问题，直到您能够发布确切的错误

更新错误.. 你在运行 rc.8 版本的 angularfire2

您需要分享参与其中的完整代码。就像这个：this.noteListService.getNoteList()

请帮帮我；（。自从 4 天以来，我一直被那些离子错误所困扰。这是最后一个

【参考方案1】：

你还没有从 rxjs 正确导入 map 操作符，同样从 rxjs 6 开始你需要使用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()
          ))
        )
      );
  

【讨论】：

你的意思是 import ''rxjs/.../map;

如果您使用 rc.8 w/o 错误，这意味着您已经升级到 rxjs 6。在这种情况下，您需要 import map from 'rxjs/operators' 和管道；查看 rxjs 6 迁移日志github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

我的问题已解决，但我遇到了另一个错误。有效载荷错误。

【参考方案2】：

新版本 angularfire v 5.0.0-rc.9 一切正常

这是从 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