使用异步在 UI 上可观察答案

【问题标题】：Observable on UI using async使用异步在 UI 上可观察
【发布时间】：2018-09-14 11:02:48
【问题描述】：

我有以下代码

 this.dlist$ = this.dbCollectionService.datalists .snapshotChanges().map(
      items => {
        return items.map(a => {
          const id = a.payload.doc.id;
          const data = a.payload.doc.data();
          return { id,...data}
        })
      }
    );

datalists 是 Firestore 集合

它提供的数据正确，我通过控制台检查。

下面是UI部分

 <div >
              <p>Or choose from an existing one</p>
              <ul class="list">
                <li *ngFor="let item of dlist | async;  let i=index">
                      <span>item.name</span>
                </li>

              </ul>
            </div>

列表没有绑定。

更新

我发现最后缺少 $ 的问题

请帮忙

【问题讨论】：

它的async 不是asyc
这是拼写错误，无论如何我发现它最后缺少 $ 的问题
你确定payload.doc存在于'a'上？

标签： javascript angular google-cloud-firestore observable angularfire2

【解决方案1】：

您缺少一些 {{ }} 并且关键字应该是异步的。

<li *ngFor="let item of dlist | async;  let i=index">
   <span>{{ item.name }}</span>
</li>

【讨论】：

这是拼写错误，无论如何我发现它最后缺少 $ 的问题
虽然在使用 {{ }} 渲染列表项时，您也忘记插入字符串
我只是打印对象只是为了检查它的异步工作与否。谢谢

【解决方案2】：

您缺少花括号，并且管道是 async 而不是 asyc。

【讨论】：

这是拼写错误，无论如何我发现它最后缺少 $ 的问题

【解决方案3】：

它的async 和数据插值没有完成

<li *ngFor="let item of dlist | async;  let i=index">
   <span>{{ item.name }}</span>
</li>

【讨论】：

这是拼写错误，无论如何我发现它最后缺少 $ 的问题