'Observable<DocumentSnapshot<DocumentData>> Angular Firebase 类型上不存在属性'then'答案

【问题标题】：Property 'then' does not exist on type 'Observable<DocumentSnapshot<DocumentData>> Angular Firebase'Observable<DocumentSnapshot<DocumentData>> Angular Firebase 类型上不存在属性'then'
【发布时间】：2020-11-14 14:53:12
【问题描述】：

您好，我正在尝试在 firebase 中获取单个文档，但它给了我一个错误

类型“Observable”上不存在属性“then”。

我已关注 firebase 上的文档 https://firebase.google.com/docs/firestore/query-data/get-data

我的 service.ts 代码是

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class ViewReportService {

 

     constructor(private firestore: AngularFirestore) { }
    
      getPassengerReport(myDocument) {
        const passengerRef = this.firestore.collection("newPassenger").doc(myDocument);
        const data = passengerRef.get().then(function (doc) {
          console.log("Cached document data:", doc.data());
        }).catch(function (error) {
          console.log("Error getting cached document:", error);
        });
        return data
      }

}

Angular 组件代码

    passengerData = this.service.getPassengerReport(passengerDocumentID);
    console.log(passengerData)
    }

【问题讨论】：

标签： javascript angular firebase google-cloud-firestore

【解决方案1】：

您需要考虑到您正在使用 Angular。 Angular 的最佳实践之一是使用 Observable 而不是 promises

让我们转换你的函数以返回一个Obervable

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class ViewReportService {
  constructor(private firestore: AngularFirestore) { }
  getPassengerReport = (myDocument) => 
    this.firestore.collection("newPassenger").doc(myDocument).get()
}

在上面我们已经将getPassengerReport定义为一个使用ES6语法返回this.firestore.collection("newPassenger").doc(myDocument).get()行的函数

在你的组件文件中你可以有

 passengerData$ = this.service.getPassengerReport(passengerDocumentID);

你可以用

包装你的html

<ng-container *ngIf='passengerData$ | async as passengerData'>

  <!-- HTML CODE HERE -->

</ng-container>

我们使用 async 管道订阅Observable

【讨论】：

非常感谢，我现在的问题是当我将 {{passenger}} 放在我的 html 上时，它会显示 [object Object]。我需要将其转换为 json 吗？ - 抱歉，我对 angular 和 javascript 非常陌生，我已在顶级乘客 = [] 处添加了变量；乘客$ : Observable;
[Object Object] 在 html 中应为 passenger 是一个对象。如果您想查看对象，您可以使用json 管道，例如{{ passenger | json }} 否则您可以简单地访问属性，例如如果乘客有一个名称属性，那么您可以将其显示为{{ passenger.name }}

【解决方案2】：

.then 是为了承诺。 Observable 与 Promise 是不同的东西，你需要将 observable 转换为 Promise，如 something.toPromise().then()。

但重要的是您需要考虑订阅，因此您可能需要为其添加运算符first()。

所以代码应该是something.pipe(first()).toPromise().then()

请尝试以上方法。

【讨论】：