时间戳

首页 > 解决方案 > 将 Firestore 文件分配给变量，并在 HTML-Angualr 7 中显示

javascript - 将 Firestore 文件分配给变量，并在 HTML-Angualr 7 中显示

问题描述

我正在尝试将 firestore 中的特定字段分配给 Angular 中的变量。

具体来说，我正在尝试获取归档的“年度”，并将其显示为 HTML。

在此处输入图像描述

这是我尝试过的代码：

AnnualVacationRef = this.firestore.collection('vacationBalance').doc('B2TKfIoz1jrJJ954jZ9z.Annual');

在 HTML 中：

<h3>Annual Vacations: {{AnnualVacationRef.Annual}}</h3>

但是，什么都没有显示。

感谢您的帮助。

标签： javascriptangulargoogle-cloud-firestore

解决方案

所以你说对了一半。但是，您不要.Annual输入文档 ID：

const document = this.firestore.collection('vacationBalance').doc('B2TKfIoz1jrJJ954jZ9z')

但是您还需要使用该.get()方法来获取DocumentSnapshot：

const snapshot: Obervable<firestore.DocumentSnapshot> = this.firestore.collection('vacationBalance').doc('B2TKfIoz1jrJJ954jZ9z').get()

正如您在返回类型中看到的，您将获得一个 Observable。现在您有两种选择来获取该值：subscribe或pipe(map(...))

订阅

this.fireStore.collection('collectionname').doc(id).get().subscribe(value => {
  const data = value.data();
  console.log(data);
  item = data;
});

管道（地图（...））

import { map } from 'rxjs/operators';

item = this.fireStore.collection('collectionname').doc(id).get().pipe(map(
  (value: firestore.DocumentSnapshot) => {
    return value.data();
  }
));

.data总是返回整个文档。结果应如下所示：

{“年度”：14 }

html: 

<p>Annual: {{item?.Annual}}</p>

推荐阅读