Question

我有一个可观察到的从API获取数据的方法，它与分页功能相关。如何将响应数据对象添加到保存首页数据的变量上。本质上是Array push的工作。

现在，由于我正在覆盖数据，因此每个分页都会向API发送一个请求，甚至是以前的页面。我想将对象数组（data.articles）添加到所选类别的末尾。


data = {
   general: undefined,
   business: undefined,
   entertainment: undefined,
   health: undefined,
   science: undefined,
   sports: undefined,
   technology: undefined
};

this.newsService.getNews(endpoint, params).subscribe(data => {
   this.data[category] = data.articles;
});

我希望数据像这样工作：

如果我在“常规”选项卡上显示1条文章，则data.general将保存其中包含一个对象的数组。当我单击下一页时，data.general应该包含一个包含2个对象的数组，依此类推。

解决方案

Array.prototype.push起作用了，出于某种原因，当我最初尝试使用它时，它不起作用。但是我认为那是因为最初它是不确定的。但是，下面的方法可以正常工作。

if (!this.data[category]) {
   this.data[category] = data.articles;
} else {
   Array.prototype.push.apply(this.data[category], data.articles);
}

Answer 1

尝试一下，也许这就是您想要的。

Array.prototype.push.apply(this.data[category], data.articles);

以上代码将对象数组合并为一个并设置为this.data [category]

Answer 2

我知道您已经接受了答案，但是如果您有兴趣将数据保留在流中而不是数组中，则可以执行以下操作：

  // Action Stream
  private productInsertedSubject = new Subject<Product>();
  productInsertedAction$ = this.productInsertedSubject.asObservable();

  // Merge the streams
  productsWithAdd$ = merge(
    this.products$,                       // Original stream of data
    this.productInsertedAction$           // New data
  )
    .pipe(
      scan((acc: Product[], value: Product) => [...acc, value]),
      catchError(err => {
        console.error(err);
        return throwError(err);
      })
    );

如果您要添加数组而不是单个值，则该技术将是相似的。

如何合并2个对象，每个对象包含一个对象数组？

2 个答案: