打印 Firestore 对象答案

【问题标题】：Printing firestore object打印 Firestore 对象
【发布时间】：2023-03-29 20:41:01
【问题描述】：

有没有办法打印一个 firestore 对象？在使用 AngularFire 时，我正在尝试将 firestore 中文档的名称打印为 html。我的firestore有一个父“nforms”，它有两个孩子作为文档“pdf”，“img”，在pdf里面我有一个pdf叫做“norcal-letterhead.pdf”，在img里面我有一个img叫做“git-img.jpg ”。

这就是我从 Firestore 中提取数据的方式。

fptr: Observable<any[]>;
fileData: DocumentReference[];
fileCollection: DocumentReference;
filePtr: Observable<any>;
constructor(firestore: AngularFirestore, firestorage: AngularFireStorage) {
    this.filePtr = firestore.collection('nforms').valueChanges();
    this.filePtr.subscribe(
        data => {
            this.fileData = data
            console.log(this.fileData)
            this.fileData.map(r => this.fileCollection = r)
            console.log(this.fileCollection)
        }
    );
}

这就是我从 pull 中打印数据的方式。

<tr *ngFor="let data of filePtr|async">
<td *ngIf="fileCollection; let a">{{a}} or {{data}}</td></tr>

我回来了：[object Object] 或 [object Object]

这是我从控制台得到的响应。正如您所看到的，我能够使用 DocumentReference 类型的对象提取看起来像 2 的数组。

【问题讨论】：

print a firestore object 是什么意思？
我指的是 Firestore 保存数据集合的方式。请查看我的截图，nforms.component.ts.114, (2) [{...},{...}]，我相信这两个看起来像 {...} 的项目各自代表一个对象。在屏幕截图的正下方，它还显示它们属于 DocumentReference 类型。
我还应该提到，我最初设置 Firestore 的方式是使用控制台，这就是返回给我这些数据的原因。然而，几个小时后，我决定关注angular firestore sdk documentations。这样做，我能够正确上传和下载我的数据。不过，我很好奇 google firebase 是否有办法读取使用上传按钮上传到空数据库的简单 pdf。它将对上面提到的数据建模，DocumentReference 类型的 [{...}]。
我还是不明白你说的print a firestore object是什么意思。我可以看到图片是的，但不知道你真正想要什么。但如果你解决了它，很好！ :)
如果你有一个空的云存储并且你创建（使用控制台）一个包含两个文档的集合，nforms -> document-id -> 属性，然后 sdk 返回 (2)[ {...},{...}]，如屏幕截图所示。一个人如何阅读这些项目？如何在您的 HTML 视图中“打印”？为那里的混乱道歉，这不是 JAVA 哈哈 :)

标签： javascript angular google-cloud-firestore

【解决方案1】：

我想分享一些关于这篇文章的更多见解，以供将来参考它可以帮助的人。虽然这不是打印使用控制台“上传”按钮创建的 firestore 对象的答案，但这是打印相同对象的答案，除了这次我通过 sdk '.upload' 创建它们。

定义对象 FireStore 项：

export interface fstoreitem{
    form_id: string;
    form_name: string;
    form_path: string;
}

定义对集合 nforms 的 firestore 引用：

constructor(private firestore: AngularFirestore){
 this.fitemCollection = firestore.collection<fstoreitem>('nforms/');
 this.fitem = this.fitemCollection.valueChanges();
}

定义上传 Firestore 项目的例程：

addStoreItem(form_name: string, form_path: string) {
 const form_id = this.firestore.createId();
 const form_item: fstoreitem = { form_id, form_name, form_path };
 this.fitemCollection.doc(form_id).set(form_item);
}

在视图中显示对象：

<tr *ngFor="let data of fitem | async">
 <td>{{data.form_name}}</td>
 <td><a href="{{data.form_path}}">download</a></td>
</tr>

【讨论】：