加入可观察的angularfire2阵列

问题描述

我正在尝试结合从Angularfire2实时数据库查询返回的2个可观察数组，但是我遇到了一些问题。首先，我开始使用下面的代码，结果与预期的一样。但是，我注意到，每当我尝试加载更多帖子时，其他帖子就不再实时更新。

this.postList = this.postList.concat( data.slice.reverse() );

经过一番搜索，我发现rxjs concat可以处理加入2个可观察数组的问题。所以我尝试了下面的代码。现在的问题是我收到错误消息“类型'Observable'缺少类型'any []'中的以下属性：length，pop，push，concat和另外25个”

this.postList = concat( this.postList,data.slice().reverse() );

以下是我用来加载帖子的功能。目的是一次仅加载20个帖子，并将新的帖子数组加入主帖子数组。

posts.page.ts

    getPosts(limit){
      return new Promise((resolve) => {
        this.postsService.getPosts(limit).subscribe(data => {
          this.postList = data;
          this.startAtId = this.postList[this.postList.length - 1].$key;
          console.log(this.startAtId)
          if (this.lastId === this.startAtId){
            this.hasMoreData = false;
          }
          resolve(true);
        });
      });
    }

    getMorePosts(limit,endAt){
      return new Promise((resolve) => {
        this.postsService.getMorePosts(limit,endAt).subscribe(data => {
          this.postList = concat( this.postList,data.slice().reverse() ); 
          this.startAtId = this.postList[this.postList.length - 1].$key;
          if (this.lastId === this.startAtId){
            this.hasMoreData = false;
          }
          resolve(true);
        });
      });
    }

posts-data.service.ts

getPosts(limit) {
    return this.db.list('/reasons',ref => ref.orderByKey().limitToLast(limit)).snapshotChanges().pipe( 
      map( (data: any[] ) => {
        return data.map( data => {
          console.log(data);
          const $key = data.payload.key;
          const item = { $key,...data.payload.val() };
          return item;
        }).filter(data => data.flag !== true).filter(data => data.privacy !== true)
      })
    );
  }


  getMorePosts(limit,lastId) {
    return this.db.list('/reasons',ref => ref.orderByKey().endAt(lastId).limitToLast(limit)).snapshotChanges().pipe( 
      map( (data: any[] ) => {
        return data.map( data => {
          const $key = data.payload.key;
          const item = { $key,...data.payload.val() };
          return item;
        }).filter(data => data.flag !== true).filter(data => data.privacy !== true)
      })
    );
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）