从firebase的两个http获取请求中获取数据，并将它们组合成一个角度的数组，并显示在页面上

Question

我正在开发有角度的应用程序，我想在其中显示来自两个不同集合的帖子即是公共和私人的。现在我正在发出两个http请求，但正在获取数据，但无法将其合并到一个数组中，而且我想在每次更新时将其显示在组件中。我无法解析从firebase获得的多个键。虽然我可以解析单个对象。

这是我的代码

service.ts

  getAllData(){
    let x=this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/public.json`)
    let y=this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/private.json`)
    forkJoin(x,y)
    .subscribe(data=>{


      console.log(data)

    })

component.ts

 ngOnInit(): void {
    this.acrud.getAllData()
}

输出

[
  {
    "-M7Szjv7F8hgjx4bL1Nj": {
      "category": "Happy",
      "date": "2020-05-16T14:57:15.743Z",
      "desc": "11111",
      "imgurl": "https://firebasestorage.googleapis.com/v0/b/write-your-heart-out-b338b.appspot.com/o/UauthUsers%2FScreenshot%20(8).png?alt=media&token=784d3163-6fe5-4f00-94ba-8b38a08d7a5e",
      "name": "111",
      "nameToSearch": "1111",
      "privacy": "true",
      "subcategory": "  ",
      "title": "1111"
    },
    "-M7TOCjqFUcr78TsdH6I": {
      "category": "Happy",
      "date": "2020-05-16T16:49:45.728Z",
      "desc": "This is public postThis is public postThis is public postThis is public postThis is public post",
      "imgurl": "https://firebasestorage.googleapis.com/v0/b/write-your-heart-out-b338b.appspot.com/o/UauthUsers%2FScreenshot%20(8).png?alt=media&token=ee6cd4c2-cdb3-43a8-86e2-4f65e2fb8c20",
      "name": "Mehul ",
      "nameToSearch": "this is public post",
      "privacy": "true",
      "subcategory": "  ",
      "title": "This is public post"
    }
  },
  {
    "-M7T5XTN6td6HlQKeHas": {
      "category": "Happy",
      "created_date": "2020-05-16T15:09:54.527Z",
      "date": "2020-05-16T15:09:54.527Z",
      "desc": "2222222222222",
      "name": "22222222222",
      "nameToSearch": "22222",
      "privacy": "false",
      "subcategory": "  ",
      "title": "22222"
    }
  }
]

输出图像

对于单键，我能够像这样解析数据

 this.acrud.getPublicPost()
      .pipe(
        map(responseData => {
          const postsArray: UPost[] = [];
          for (const key in responseData) {
            if (responseData.hasOwnProperty(key)) {
              postsArray.push({ ...responseData[key] });
            }
          }
          return postsArray;
        })
      )
      .subscribe(posts => {
        this.isFetching = false;
        this.public_post = posts;
        this.allpost = this.allpost.concat(this.public_post)
        console.log(this.public_post)
        console.log(this.isAll,this.isPrivate,this.isPublic)
      });

Answer 1

我认为您的问题可以解决，如果您这样编辑合并的对象

getAllData(){
    let x=this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/public.json`)
    let y=this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/private.json`)
    forkJoin(x,y)
    .subscribe(data => {
         console.log(data.flatMap(a=>Object.values(a)).reduce((acc,item)=>{
                       return {
                                ...acc,
                                ...item
                              };
          });
    });
 }

您将得到此结果;

{
     category: "Happy",
     created_date: "2020-05-16T15:09:54.527Z",​
     date: "2020-05-16T15:09:54.527Z",
     desc: "2222222222222",
     imgurl: "https://firebasestorage.googleapis.com/v0/b/write-your-heart-out-b338b.appspot.com/o/UauthUsers%2FScreenshot%20(8).png?alt=media&token=ee6cd4c2-cdb3-43a8-86e2-4f65e2fb8c20",
     name: "22222222222",
     nameToSearch: "22222",
     privacy: "false",
     subcategory: "  ",
     title: "22222"
}