angular - 更新 .snapshotChanges() 代码以使用 angularfire2 5.0..0 rc-8、firebase 5.0.2
问题描述
我已成功更新 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
函数 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 ) 在 createDirectiveInstance ( 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 不是函数
解决方案
您还没有从 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()
}))
})
);
}
}
推荐阅读
- java - 更改 Fragment 的背景图片
- java - 尽管包含必要的语法,但无法在 Android 应用中查看导航栏
- bash - 如何将目录名称和日期附加为备份文件后缀?
- opencv3.0 - python cv2特征匹配给出不同的结果
- c# - 如何使控件的大小与屏幕分辨率相对应?
- machine-learning - 为什么最大池化层在解决回归问题时不会破坏 CNN 的性能?
- r - 如何将我的数据框转换为 R 中的这种特定格式?
- javascript - Symfony Ajax 请求错误 500
- javascript - 在 react-router 中管理(添加/删除)查询参数的最佳方法
- javascript - 为什么我们使用 [Symbol.iterator] 而不是 `for` 循环?