如何推送到 Angular 4 中的数组 Observable？接收脚本

Question

我的服务类有一个属性：

 articles: Observable<Article[]>;

它由使用标准 http.get().map() 解决方案的 getArticles() 函数填充。

我怎样才能手动将新文章推送到这个数组中；一个尚未持久化的，因此不是 http get 的一部分？

我的场景是，您创建了一篇新文章，在保存之前我希望 Article[] 数组将这个新文章推送到它，以便它显示在我的文章列表中。

此外，此服务在 2 个组件之间共享，如果组件 A 使用 ng OnInit() 使用服务并将结果绑定到重复部分 *ngFor ， 将从组件 B 更新服务数组同时更新组件 A 的 ngFor 部分的结果？ 还是我必须手动更新视图？

非常感谢，西蒙

原文由 simon_www 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如您在评论中所说，我会使用主题。

保持 articles 可观察而不是存储为数组的优点是 http 需要时间，因此您可以订阅并等待结果。此外，这两个组件都会获得任何更新。

 // Mock http
const http = {
  get: (url) => Rx.Observable.of(['article1', 'article2'])
}

const articles = new Rx.Subject();

const fetch = () => {
  return http.get('myUrl').map(x => x).do(data => articles.next(data))
}

const add = (article) => {
  articles.take(1).subscribe(current => {
    current.push(article);
    articles.next(current);
  })
}

// Subscribe to
articles.subscribe(console.log)

// Action
fetch().subscribe(
  add('article3')
)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>

原文由 Richard Matsen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可能只想存储文章数组，而不是存储整个可观察对象，例如

articles: Article[]

fetch() {
    this.get(url).map(...).subscribe(articles => this.articles)
}

然后，您可以使用标准数组操作方法来操作 articles 列表。

如果您存储可观察对象，它会在您每次订阅它时重新运行 http 调用（或使用 | async 渲染它），这绝对不是您想要的。

但为了完整起见：如果你确实有一个数组的 Observable，你想向其中添加项目，你可以在它上面使用 map 运算符来向它添加指定的项目，例如

observable.map(previousArray => previousArray.concat(itemtToBeAdded))

原文由 ehrencrona 发布，翻译遵循 CC BY-SA 3.0 许可协议