javascript 如何在 Angular 4 中推送到数组的 Observable？RxJS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47424966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to push to Observable of Array in Angular 4? RxJS
提问by simon_www
I have a property on my service class as so:
我的服务类有一个属性，如下所示：
articles: Observable<Article[]>;
It is populated by a getArticles() function using the standard http.get().map()solution.
它由使用标准http.get().map()解决方案的 getArticles() 函数填充。
How can I manually push a new article in to this array; One that is not yet persisted and so not part of the http get?
如何手动将新文章推送到此数组中；一个尚未持久化，因此不是 http get 的一部分？
My scenario is, you create a new Article, and before it is saved I would like the Article[] array to have this new one pushed to it so it shows up in my list of articles.
我的情况是，您创建一个新文章，在保存之前，我希望 Article[] 数组将这个新文章推送到它，以便它显示在我的文章列表中。
Further more, This service is shared between 2 components, If component A consumes the service using ng OnInit()and binds the result to a repeating section *ngFor, will updating the service array from component B simultaneously update the results in components A's ngForsection?Or must I update the view manually?
此外，此服务在 2 个组件之间共享，如果组件 A 使用 ng 使用该服务OnInit()并将结果绑定到重复部分*ngFor，那么从组件 B 更新服务数组是否会同时更新组件 AngFor部分中的结果？或者我必须手动更新视图？
Many Thanks, Simon
非常感谢，西蒙
采纳答案by Richard Matsen
As you said in comments, I'd use a Subject.
正如您在评论中所说，我会使用主题。
The advantage of keeping articlesobservable rather than storing as an array is that http takes time, so you can subscribe and wait for results. Plus both components get any updates.
保持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>回答by ehrencrona
Instead of storing the whole observable, you probably want to just store the article array, like
您可能只想存储文章数组，而不是存储整个 observable，例如
articles: Article[]
fetch() {
this.get(url).map(...).subscribe(articles => this.articles)
}
Then you can manipulate the articleslist using standard array manipulation methods.
然后您可以articles使用标准数组操作方法操作列表。
If you store the observable, it will re-run the http call every time you subscribe to it (or render it using | async) which is definitely not what you want.
如果您存储 observable，它会在您每次订阅它（或使用 渲染它| async）时重新运行 http 调用，这绝对不是您想要的。
But for the sake of completeness: if you do have an Observable of an array you want to add items to, you could use the map operator on it to add a specified item to it, e.g.
但为了完整起见：如果你有一个数组的 Observable 想要添加项目，你可以使用 map 操作符在它上面添加一个指定的项目，例如
observable.map(previousArray => previousArray.concat(itemtToBeAdded))
observable.map(previousArray => previousArray.concat(itemtToBeAdded))
回答by yfdgvf asdasdas
ex from angular 4 book ng-book
来自angular 4 book ng-book
Subject<Array<String>> example = new Subject<Array<String>>();
push(newvalue:String):void
{
example.next((currentarray:String[]) : String[] => {
return currentarray.concat(newValue);
})
}
what the following says in example.next is take the current array value Stored in the observable and concat a new value onto it and emit the new array value to subscribers. It is a lambda expression.I think this only works with subject observables because they hold unto the last value stored in their method subject.getValue();
下面在 example.next 中说的是获取存储在 observable 中的当前数组值，并将新值连接到它上面，然后将新数组值发送给订阅者。这是一个 lambda 表达式。我认为这仅适用于主题 observables，因为它们保留存储在其方法 subject.getValue(); 中的最后一个值；
