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

Question

我正在使用firebase实时数据库开发一个ionic3应用程序。因此，我使用angularfire2。该应用程序允许用户存储链接。链接由一个url和相关的标记组成。我的数据库结构是这样的：

​

​

所有链接都位于/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);
});

这样，我的最后一个可观察到的东西就会发出用户链接对象。组件订阅中的console.log(res)显示了所需的结果：

​

​

但是，由于我发出链接对象，角告诉我ngFor只支持可迭代性：

​

​

最后，我的问题是：

1. 如何将可观察到的items转换为模板中的ngFor可迭代的内容？
2. 是否有更好的方法来使用rxjs操作符来完成我想要的过滤？

提前谢谢！

Answer 1

这就是在Rx中需要这样做的方法。我假设您希望摆脱响应中的所有数据，而只获取标记和url。

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));