使用ngFor循环遍历数据，按索引号匹配两个对应项，然后将其他数据放入ngFor循环

Question

我制作了一个包含15张图像的网格，这些图像是使用angularfire2从Firebase数据库中获取的。我遍历数组，获取每个图像，设置索引（1..15），并在视图中显示它们。

每个图像都附加了一个userID，但是该用户对象存储在另一个单独的数据库中：

我在ngFor循环中设置索引，如下所示：

*ngFor="let story of storiesArr; let i = index;" id={{i}}

以及对用户的索引：

this.storiesArr.forEach((story, index) => {
      this.getUserProfiles(story.userId, index)
    });

预期结果： 因此，如果用户上传了一个故事，则需要将userPicture从相应的用户对象放到ngFor循环内的视图中。

当前状态： 我拥有所有数据，以及与哪个用户上载特定故事相对应的索引。

我该如何处理？

Answer 1

两种方法

方法1： 检索所有故事和用户个人资料。然后遍历所需的对象，然后根据外键（另一个实体/文档中引用的Firebase ID）替换映射的对象。

参考：https://dzone.com/articles/firebase-advance-querying-join-reference

方法2： 加入angular2 Firebase: joining tables

在ngOnInIt中进行所有这些服务调用。不在模板中。