Question

我已成功更新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不是新主页上的一个函数（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）在createViewNodes上（http://localhost:8100/build/vendor.js:11680:36）在createRootView上（http://localhost:8100/build/vendor.js:11594:5）at callWithDebugContext（http://localhost:8100/build/vendor.js:12629:25）在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）堆错误：未捕获（在承诺中）：TypeError：this.noteListService.getNoteList（...）。snapshotChanges（...）。map not not 功能

Answer 1

您还没有从rxjs正确导入地图运算符，从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()
          }))
        })
      );
  }
}

Answer 2

新版本的angularfire v 5.0.0-rc.9

可以解决所有问题

这是从firebase检索数据的代码。

<ScrollView>
  <LinearLayout>
  <TextView/>
  <WebView/>
  <TextView/>
  </LinearLayout>
</ScrollView>

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

2 个答案: