Angular 2：合并一个可观察的 "inside" 另一个

Question

在页面加载时，我将此数据作为项目加载到模板中：

{
    "id": "1",
    "name": "Leonardo",
    "weapon": "sword",
},
{
    "height": "2",
    "name": "Donatello",
    "weapon": "stick",
},

我在我的组件中使用这个加载数据：

this.dataSubscription = this.dataService.getAllTurtles().subscribe(res => this.turtles = res);

每个项目还有一个按钮 "LOAD MORE DATA"。当我点击它时，它加载了一些属于该特定项目的额外数据：

this.dataSubscription = this.dataService.getData(id).subscribe(res => this.singleData = res);

给我加载这个

{
    "favoritePizza": "Hawai",
}

现在，我想将这些数据合并到原始数据流中，所以我会：

{
    "id": "1",
    "name": "Leonardo",
    "weapon": "sword",
    "favoritePizza": "Hawai"
},
{
    "id": "2",
    "name": "Donatello",
    "weapon": "stick",
}

但我不确定如何以这种方式连接数组。目前当我用 concat 做的时候：

this.dataSubscription = this.dataService.getData(id).subscribe(res => this.turtles = this.turtles.concat(res));

我刚得到连接数组：

{
    "id": "1",
    "name": "Leonardo",
    "weapon": "sword",
},
{
    "id": "2",
    "name": "Donatello",
    "weapon": "stick",
}
{
    "favoritePizza": "Hawai"
}

如何使用它的 ID 访问数组中的特定项目并将我稍后加载的数据添加到其中？

Answer 1

你可以这样做

var a1 = [{
  "id": "1",
  "name": "Leonardo",
  "weapon": "sword",
  "favoritePizza": "Hawai"
}, {
  "id": "2",
  "name": "Donatello",
  "weapon": "stick",
}]

var a2 = {
  "favoritePizza": "Hawai",
}

a1 = a1.map((e) => {
  return e.id === "1" ? Object.assign(e, a2) : e
})

console.log(a1);

不过可能还有更好的选择！！！

Answer 2

也许你的电话是通过按钮完成的 "LOAD MORE DATA"

this.dataSubscription = this.dataService.getData(id).subscribe(res => this.singleData = res);

应该命名为

this.dataSubscription = this.dataService.getTurtle(1).subscribe(res => this.singleData = res);

使用 getTurtle，return 对象 Turtle 的 Observable，其中包含，根据文档设计成 mongoDB，Turtle 的详细信息，包括最喜欢的披萨：

{
  "id": "1",
  "name": "Leonardo",
  "weapon": "sword",
  "favoritePizza": "Hawai"
}

Answer 3

this.dataService.getAdditionalData(id)
  .subscribe(data => {
    this.turtles = this.turtles.map(i => {
      if (i.id !== id) {
        return i;
      }
      return { ...i, ...data };
    })
  })

示例https://stackblitz.com/edit/angular-tl4mt1?file=app%2Fapp.component.ts

Angular 2：合并一个可观察的 "inside" 另一个

Angular 2: merging one observable "inside" another

angular

observable

subscribe