时间戳

首页 > 解决方案 > 使用 Angular Firestore 获取数据

angular - 使用 Angular Firestore 获取数据

问题描述

我是 Angular Firestore 的新手，我正在尝试从 Firestore 获取数据。我有以下代码：

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

export class ProfileComponent implements OnInit {
    myArray: any[] = []
    constructor(private authService: AuthService, public afs: AngularFirestore) {}

    test = this.afs.collection('doctors').get().subscribe((ss) => {
        ss.docs.forEach((doc) => {this.myArray.push(doc.data()); });
    });
}

在我的 html 文件中，我试图像这样显示 myArray：

<li *ngFor='let doc of myArray'>
     {{doc}}
</li>

我知道我的数组在我的 firebase 中正确读取了表“医生”，因为它打印了三个对象，这是我的医生表中的元素数量，但我在 html 中得到以下输出：

在此处输入图像描述

有人可以帮我正确显示这些值吗？餐桌医生有电子邮件、名字和姓氏。我想打印每个实体的电子邮件。

标签： angulartypescriptfirebasegoogle-cloud-firestoreangularfire2

解决方案

您需要使用json管道显示数据，如下所示：

<li *ngFor='let doc of myArray'>
     {{doc | json}}
</li>

当json你想显示一个对象时，管道是必需的，它主要用于调试。文档中的更多信息： Angular - JsonPipe

推荐阅读