将Observable <any>转换为Observable <any []>

Question

我正在使用firebase实时数据库处理ionic3应用程序。因此我使用angularfire2。该应用程序允许用户存储链接。链接由网址和相关标签组成。这就是我的数据库结构的样子：

所有链接均位于/links/。 对于用户，链接存储为位于/users/this.user/links/的引用键。

在视图中，我想列出某个用户的所有链接。 模板详细信息：

   <ion-item *ngFor="let item of items | async">
      <h3>{{item.url}}</h3>
      <!-- TODO: add tags and other meta information -->
    </ion-item>

这是组件构造函数中发生的事情：

this.items = this.db.list('/users/' + this.user + '/links/')
    .flatMap(x => x)
    .flatMap(x => {
        let y: any = x;
        return this.db.list('/links/' + y.$key);
    })
    .map(res => {
        let url: string;
        let tags: string[] = [];

        for (let r of res) {

                // filter out tags
                if (r.$key === 'tags') {
                    for (let key in r)
                        if (key) tags.push(key);
                }

                // filter out url
                if (r.$key === 'url') {
                    for (let key in r) {
                        url = r[key];
                        break;
                    }
                }
            }
        } // for (let r of res)

        let link: Link = new Link(url, tags);
        return link;
    });

this.items.subscribe(res => {
    console.log(res);
});

这样我的最终observable会发出用户链接对象。组件订阅中的console.log(res)显示了所需的结果：

但是因为我发出了Link对象，Angular告诉我ngFor只支持iterables：

最后，我的问题是：

1. 如何将items observable转换为模板中ngFor可迭代的东西？

2. 是否有更好的方法可以使用rxjs运算符进行所需的过滤？

提前多多感谢！

Answer 1

这是你需要在Rx中完成的。我假设你想要摆脱响应中的所有数据，只获取标签和网址

const linkFromRaw = linkList => linkList
    .map(linkResponse => new Link(linkResponse.url, linkResponse.tags);

const linkToDetail = link => this.db.list('/links/' + link.$key))

this.items = this.db.list('/users/' + this.user + '/links/')
  .flatMap( links => Observable.forkJoin(links.map(linkToDetail))
     .reduce(
       (finalResponse, linkResponseArr) =>[...finalResponse, ...linkResponseArr],
       []
     )
  )
  .map(links => links.map(linkFromRaw));