Question

我在这个愚蠢的事情上浪费了大约2个小时。当我记录所有内容时，我看到的只是一个DocumentSnapshot对象，并且在模板视图中什么都没有显示。我究竟做错了什么？我应该只是将整个文档传递给组件，而不是尝试根据ID获取单个文档吗？

//component.ts

constructor(db: AngularFirestore) { 
    this.contactCollection = db.collection('contacts');

    this.contact = this.contactCollection.doc('YYlKh7Gg7khN8L636iYE')
}

//viewTemplate.ts

{{this.contact | async}}

Answer 1

您缺少<hr>函数。在下面添加了它，现在您将把整个文档放回到div{flex:1 1 40%; height:100px; border:1px solid #d9d9d9;} hr{ flex:1 1 10%; border:none; background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat'); background-repeat: no-repeat; background-size:contain; background-position: center; } article{display:flex;}中，并且可以调用其上的任何字段。

<article>
<div></div>
<hr>
<div></div>
</article>

.valueChanges（）;

Answer 2

这是我的评论的正式答案：

contact是一个Promise，必须对其进行包装才能获取基础值。在模板中，我们需要一种表达方式：

AsyncPipe
Safe Navigation Operator ?（确保我们不会尝试不及时访问未包装的值而导致运行时错误）

将其全部放到模板中：

{{(contact | async)?.some_prop}}

这会在展开some_prop的后适当地等待访问contact（从Promise返回值）。

如何在Firestore中获取1个文档？

2 个答案: