问如何在Ionic 4火力基PWA应用程序中将承诺转换为可观察到的
EN

Stack Overflow用户

提问于 2019-08-28 14:04:37

回答 2查看 834关注 0票数 0

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

public List: Observable<any>;

似乎没有更改

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

给一个可以观察到的，现在返回的秘密(在承诺中)：错误。我以前曾使用this.List返回火基数据并显示它。我已经查看了我的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"
}

firebase

rxjs

ionic4

progressive-web-apps

angular

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-08-29 09:20:59

在messageList构造函数中异步初始化MessageService，当您在MessagePage中调用getMessageList()时，它仍未定义。

如果messageList是异步获取的，则必须以某种方式将messageList作为可观察的。如果您只需要valueChanges，您可以初始化一个可观察到的映射authState到您的集合更改的对象。如果希望/需要立即在服务的构造函数中获取集合，就可以在那里订阅，并使用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();
}