Question

我正在尝试做什么：从fire base接收数据，并将该数据中的一些值显示在屏幕上。

我是怎么做的：我创建了一个Angular SPA，我从Firebase返回的数据如下： Returned Data from Firebase

我收到的错误：

然后我在组件的html部分使用* NgFor循环，如下所示：

<div class="row">
  <ul class="list-group" *ngFor = "let guardian of guardians">
    <li class="list-group-item">{{ guardian.firstname }}</li>
  </ul>
</div>

ERROR错误：尝试diff'[object Object]'时出错。只允许使用数组和迭代。

我已经找到了解决方案，常见的答案是将接收的数据转换为数组。我试图用以下方法做到这一点：

    for (const guardian in data) {array.push(guardian);}

然而，我收到的数组缺少我的所有值。它以这种形式出现：

["-L3n95t-rxA4-bOgc8fz", "-L3nF0h5EEKtwAiZv0Q7",
 "-L3oWoBmoXK3-5XBkx9i", "-L3oWxEhAcUGQX2P4yES", "-L41_cK3KD6DMduhG3P3", 
"-L4CbTtNqGuVyT3hzY-R", "-L4CfKsBxfQxSKd2PR4s", "-L4EDFkbsWMrT61fLjhD"]

这允许我使用我的* NgFor语句，但是这个数据现在对我来说没用。有关如何转换这些数据的知识吗？

在对着这一个敲打我的头三天后，任何帮助表示赞赏！：）

Answer 1

该数组中的数据实际上是监护人对象中的每个键。现在你想要做的就是利用这些钥匙。让我们假设您为密钥数组赋予了this.guardianKeys = array

等值

然后你可以遍历键并访问原始的监护人对象，如下所示：

<div class="row">
  <ul class="list-group" *ngFor = "let key of guardianKeys">
    <li class="list-group-item">{{ guardians[key].City }}</li>
    <li class="list-group-item">{{ guardians[key].Phone }}</li>
    <li class="list-group-item">{{ guardians[key].State }}</li>
    ...
  </ul>
</div>

Answer 2

这个解决方案解决了我的问题。

for (const guardian in data) {array.push(data[guardian]);}

通过将其推入空数组，然后我可以使用* NgFor迭代数组。

转换从firebase返回的数据

2 个答案: