适配AngularFire2 5.0.0-rc.8与Firebase5.0.2的snapshotChanges()代码修改求助

这个报错是因为AngularFire 5.x适配了RxJS 6+的pipeable operators，原来的链式调用map已经不再支持，得换成新的用法。我帮你调整代码，具体修改如下：

第一步：修改HomePage组件的RxJS导入和操作符用法 #

首先要把原来的原型链式map导入替换为pipeable版本的map，然后将map操作包裹到pipe()方法中：

修改后的HomePage完整代码：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular/navigation/ionic-page';
import { Observable } from 'rxjs';
// 替换旧的导入方式，引入pipeable版本的map
import { map } from 'rxjs/operators';
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()
      // 用pipe包裹map操作符，这是RxJS 6+的标准写法
      .pipe(
        map(changes => {
          return changes.map(c => ({ 
            key: c.payload.key, 
            ...c.payload.val() 
          }));
        })
      );
  }
}

为什么要这么改？ #

在RxJS 6+版本中，所有操作符都改为了pipeable模式——不再允许直接在Observable原型链上调用map、filter这类方法，必须通过pipe()方法来组合操作符。AngularFire 5.x已经全面适配了这个RxJS的版本变化，所以你原来的写法就会触发"map不是函数"的报错。

关于NoteListService的说明 #

你的NoteListService代码不需要任何修改，因为getNoteList()返回的AngularFireList在新版本中依然可以正常调用snapshotChanges()，它返回的Observable完全兼容新的pipeable操作符用法。

这样修改后，你的数据查询功能就能正常工作，同时和已有的插入功能保持兼容。

内容的提问来源于stack exchange，提问作者Biswajit