typescript Angular 订阅推送对象到数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53680000/
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
Angular subscribe push object to array
提问by Maniraj Murugan
I am making angular application and where i am having an empty array like,
我正在制作角度应用程序，并且我有一个空数组，例如，
users: any = [];
Then i am making a service call in ngOnInitto store the data into usersarray like,
然后我进行服务调用ngOnInit以将数据存储到users数组中，例如，
ngOnInit() {
//Getting the data from json
this.httpClient.get('https://api.myjson.com/bins/n5p2m').subscribe((response: any) => {
console.log("response", response.data);
response.data.forEach(element => {
//Pusing the data to users array
this.users.push(element);
});
})
//Trying to get the complete array after push of the element from the service response data
console.log("users array", this.users);
//But it shows empty array
}
But i am unable to get the data in console.log("users array", this.users);as because the service call makes a delay..
但是我无法获取数据，console.log("users array", this.users);因为服务调用延迟了..
How to push the data into this.usersand when we call outside of the service it should have the filled data and not empty as like now..
如何将数据推入this.users以及当我们在服务外部调用时，它应该具有填充的数据，而不是像现在一样为空。
Also made a working stackblitzregarding it https://stackblitz.com/edit/angular-q3yphw
还做了一个关于它的有效堆栈闪电战https://stackblitz.com/edit/angular-q3yphw
Please see the console which has current result..
请查看具有当前结果的控制台。
Current resultin console.log("users array", this.users);is empty array [].
结果电流在console.log("users array", this.users);为空数组[] 。
So i am expectingthe following resultin console.log("users array", this.users);outside the service and inside ngOnInit,
因此，我希望下面的结果在console.log("users array", this.users);服务和境内关外ngOnInit，
[
{"id":1,"value":"User One"},
{"id":2,"value":"User Two"},
{"id":3,"value":"User Three"}
]
As i am new in angular kindly help me to achieve the expected result..
由于我是 Angular 新手，请帮助我达到预期的结果..
回答by KShewengger
Had forked you Stackblitz Demo
已经分叉了你Stackblitz 演示
If you want to manipulate your data after the HTTP Client response, you can actually do so by playing with the RxJS operators. After those methods inside the pipe, when you subscribe to its final value, it will directly render to your template.
如果你想在 HTTP 客户端响应之后操作你的数据，你实际上可以通过使用 RxJS 操作符来实现。在管道内的这些方法之后，当您订阅其最终值时，它将直接呈现到您的模板。
this.httpClient
.get('https://api.myjson.com/bins/n5p2m')
.pipe(
map(response => response.data),
tap(users => console.log("users array", users)) // users array [Object, Object, Object]
)
.subscribe(users => this.users = users);
If you don't want to use the RxJS Operators, you can still manipulate it after you had subscribed to its final value and perform your manual data manipulation
There's no need to perform the .forEach() to store the array of objects from your response.data as Angular had already perform it for you. So whenever you assign it as
this.users = response.datait will store your Array of Objects[Object, Object, Object]
如果您不想使用 RxJS 运算符，您仍然可以在订阅其最终值并执行手动数据操作后对其进行操作
不需要执行 .forEach() 来存储 response.data 中的对象数组，因为 Angular 已经为你执行了它。所以每当你将它分配为
this.users = response.data它将存储您的对象数组[Object, Object, Object]
this.httpClient
.get('https://api.myjson.com/bins/n5p2m')
.subscribe(response => this.users = response.data); // This will directly store your response data in an array of objects.
回答by Sachin Shah
You can store data in array without loop also.
您也可以在没有循环的情况下将数据存储在数组中。
ngOnInit() {
//Getting the data from json
this.httpClient.get('https://api.myjson.com/bins/n5p2m').subscribe((response: any) => {
this.users.push(...response.data)
console.log("users array", this.users);
})
}
回答by Derek
Angular can use Promises and Observables to handle asynchronous operations such as this http get request. There's lots of information on this concept and here is a good starting point: Promise vs Observable
Angular 可以使用 Promises 和 Observables 来处理异步操作，比如这个 http get 请求。关于这个概念有很多信息，这里是一个很好的起点：Promise vs Observable
To further elaborate, you could wrap the http get request in a method that returns an Observable, and then subscribe to that method and wait for it to return a result before executing the log statement.
更详细地说，您可以将 http get 请求包装在一个返回 Observable 的方法中，然后订阅该方法并在执行日志语句之前等待它返回结果。
