如何在Ionic 4火力基PWA应用程序中将承诺转换为可观察到的
如何在Ionic 4火力基PWA应用程序中将承诺转换为可观察到的
提问于 2019-08-28 22:04:37
下面的代码以前与我构建的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"
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-29 17: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();
}Stack Overflow用户
发布于 2019-08-29 01:22:28
您可以通过使用Rxjs将承诺转换为可观察的，有一个名为fromPromise的函数将诺言转换为可观察的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57700586
复制相关文章
相似问题
腾讯云开发者
