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

Question

我正在开发 Angular 应用程序，我想在其中显示来自两个不同集合的帖子 即是公共的和私有的。现在我正在发出两个 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

您已询问有关合并的问题，但答案本身隐藏在您的问题中。因此，首先您要进行两次 http 调用，因此您将从单个请求中获得两个输出。现在在 subscribe 方法中，您可以在单独的数组中初始化结果，最后将它们合并到单个数组中

这是更新的代码

 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=>{
       let x1 = data[0]
        let x2 = data[1]
        let x3 = []
        x3 = this.seprate(x1)
        let x4 = this.seprate(x2)
        x3= x3.concat(x4)
        console.log(x3);
    })

seprate(x) {
    let y = []
    for (const key in x) {

      if (x.hasOwnProperty(key)) {
        y.push({ ...x[key] });
      }
    }
    return y

  }

我希望它会有所帮助，并且这种方法对于初学者来说非常简单。您也可以尝试合并地图或其他变体，但这是我能提供的最简单的方法，易于理解。

Answer 2

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

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"
}