角度2：将一个可观察的“内部”合并到另一个

yodalr 发表于 Dev

约达勒

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

{
    "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来访问数组中的特定项目，并向其添加稍后加载的数据？

克里门特·茹

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。