尝试在 HTML 中访问我的 Firestore Observable答案

【问题标题】：Trying to accessing my Firestore Observable in the HTML尝试在 HTML 中访问我的 Firestore Observable
【发布时间】：2017-11-06 09:22:56
【问题描述】：

我正在尝试访问模板中的 Firestore 变量，但它显示为空。有没有人知道如何让它发挥作用？

HTML

<a class="header">{{submissions[0]?.UsersName}}</a>

打字稿

this.submissionsCollection = this.afs.collection(pathSubmissions);
this.submissions = this.submissionsCollection.valueChanges();

submissionsCollection: AngularFirestoreCollection<Submission>;
submissions: Observable<Submission[]>;

【问题讨论】：

标签： angular firebase google-cloud-firestore

【解决方案1】：

这会奏效：

<a class="header">{{(submissions| async )[0]?.UsersName}}</a>

如果你想在 NgFor 中使用它：

  <a *ngFor="let submission of submissions | async"> {{submission?.UsersName}} </a>

【讨论】：

我尝试了您的第一个解决方案。我收到以下错误：TypeError: Cannot read property '0' of null。我确定我的数据库中有一个值。
我认为您从 Firestore 获得了空值。请展示您如何从 firebase 接收数据并确保数据不为空

【解决方案2】：

试试这个

<a *ngIf="submissions | async as submission" class="header">{{submission[0].UsersName}}</a>

【讨论】：

当心，我使用这种方法发现了一些问题。如果您稍后在代码中使用相同的 observable，例如：在 ngFor 中，它将复制结果。我不确定错误是针对我的。