更新 .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
问题描述
我已成功更新 angularfire 5.0.0.rc 8 和 firebase 5.0.2,没有错误模块.我想我要做的最后一件事就是更改此代码以检索所有数据
import { Component } from '@angular/core';从'ionic-angular'导入{导航控制器};从'ionic-angular/navigation/ionic-page'导入{IonicPage};从 'rxjs' 导入 { Observable };导入 'rxjs/add/operator/map';从'../../model/note/note.model'导入{注意};从 '../../services/note-list.service' 导入 { NoteListService };@IonicPage()@成分({选择器:'主页',模板网址:'home.html'})导出类主页{noteList:Observable构造函数(公共导航控件:导航控制器,私人 noteListService:NoteListService){this.noteList = this.noteListService.getNoteList().snapshotChanges().地图(变化 =>{返回changes.map(c => ({密钥:c.payload.key, ...c.payload.val()}))});}}
noteListService 文件...
import { Injectable } from '@angular/core';从 'angularfire2/database' 导入 { AngularFireDatabase };从'../model/note/note.model'导入{注意};@Injectable()导出类 NoteListService {private noteListRef = this.db.list('note-list');构造函数(私有数据库:AngularFireDatabase){}getNoteList() {返回 this.noteListRef;}添加注(注:注){返回 this.noteListRef.push(note);}更新注(注:注){返回 this.noteListRef.update(note.key, note);}removeNote(注意:注意){返回 this.noteListRef.remove(note.key);}}
帮助更改此代码,使其与我的新版本 angularfire 5.0.0 rc 8 和 firebase 5.0.2 兼容
这是我的一半代码工作后的新错误.. 插入部分.但我仍然无法查询
<块引用>运行时错误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 [作为 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一>)堆错误:未捕获(承诺):类型错误:this.noteListService.getNoteList(...).snapshotChanges(...).map 不是一个函数
新版本 angularfire v 5.0.0-rc.9 一切正常
这是用于从 firebase 检索数据的代码.
import { Component, Injectable } from '@angular/core';/*从离子角"导入{导航控制器};*/从'ionic-angular/navigation/ionic-page'导入{IonicPage};从 'angularfire2/database' 导入 { AngularFireDatabase, AngularFireList };从 'rxjs' 导入 { Observable };从'rxjs/operators'导入{地图};从'../../model/note/note.model'导入{注意};@Injectable()@IonicPage()@成分({选择器:'主页',模板网址:'home.html'})导出类主页{itemsRef: AngularFireList;项目:Observable;构造函数(数据库:AngularFireDatabase){this.itemsRef = db.list('note-list');this.items = this.itemsRef.snapshotChanges().pipe(地图(变化=>changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))));}}
https://github.com/bnayak0225/Biswajit-Note-Ionic-Firebase-angularfire2-5.0.0-rc-9
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
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
这篇关于更新 .snapshotChanges() 代码以使用 angularfire2 5.0..0 rc-8、firebase 5.0.2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!