如何在 Ionic 4 firebase PWA 应用程序中将承诺转换为可观察

Question

以下代码之前与我构建的 Ionic/Cordova 应用程序一起工作。我正在尝试重用一些以前的代码来构建一个 Ionic PWA 应用程序但是现在

public List: Observable<any>;

似乎没有改变

this.List = this.messageService.getMessageList().valueChanges();

到 Observable，现在 return 未捕获（承诺）：错误。我以前使用 this.List 到 return firebase 数据并显示它。我已经查看了我的 package.json 数据，但我仍在使用相同的 rxjs、firebase 和 anglefire。唯一缺少的部分是 Firebase Cordova 插件。有什么想法我想念的吗？

message.ts

import { Component, OnInit} from '@angular/core';
import { MessageService } from '../../services/messages/message.service';
import { Observable } from "rxjs";

@Component({
  selector: 'app-message',
  templateUrl: './message.page.html',
  styleUrls: ['./message.page.scss'],
})

export class MessagePage implements OnInit {
  public List: Observable<any>;

  constructor(
    private messageService: MessageService,
  ) {}

  ngOnInit() {
  this.List = this.messageService.getMessageList().valueChanges();
  console.log('List', this.List);
  }
}

service.ts

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})

export class MessageService {
  public messageList: AngularFirestoreCollection<any>;

  constructor(
    public afAuth: AngularFireAuth,
    private firestore: AngularFirestore

  ) {
    this.afAuth.authState.subscribe(user => {
      this.messageList = this.firestore.collection(
        `/posts`, ref => ref.orderBy('created')
        );
    });
  }

  getMessageList(): AngularFirestoreCollection<any> {
    return this.messageList;
  }
}

package.json

{
  "name": "pwa",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/pwa": "^0.803.0",
    "@angular/router": "~8.1.2",
    "@angular/service-worker": "~8.1.2",
    "@capacitor/cli": "^1.1.1",
    "@capacitor/core": "^1.1.1",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/firebase": "^5.12.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/pwa-elements": "^1.3.0",
    "@ionic/storage": "^2.2.0",
    "core-js": "^2.5.4",
    "firebase": "^6.4.2",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project"
}

Answer 1

您可以使用 Rxjs 将 promise 转换为 observable，有一个名为 fromPromise 的函数可以将 promise 转换为 observable。

Answer 2

您在 MessageService 构造函数中异步初始化 messageList，当您在 MessagePage.

中调用 getMessageList() 时它仍然未定义

如果 messageList 是异步获取的，您必须以某种方式提供 messageList 作为 Observable。如果你只需要 valueChanges，你可以初始化一个将 authState 映射到你的集合更改的 Observable。如果你想/需要立即在你的服务的构造函数中获取集合，你可以在那里订阅并使用 shareReplay 为你的组件中的后期订阅者提供最后获取的值。

public messageList: Observable<any>;

constructor(public afAuth: AngularFireAuth, private firestore: AngularFirestore) {
  this.messageList = this.afAuth.authState.pipe(
    switchMap(user => this.firestore.collection(
      `/posts`, ref => ref.orderBy('created')
    ).valueChanges()),
    shareReplay(1)
  );
  this.messageList.subscribe();
}

如何在 Ionic 4 firebase PWA 应用程序中将承诺转换为可观察

how do I convert a promise to observable in a Ionic 4 firebase PWA app

rxjs

firebase

progressive-web-apps

angular

ionic4