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

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

但由于我发出 Link 对象，Angular 告诉我 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));