Angular 订阅推送对象到数组 [英] Angular subscribe push object to array

问题描述

我正在制作角度应用程序，并且我有一个空数组，例如

 用户:any = [];

然后我在 ngOnInit 中进行服务调用以将数据存储到 users 数组中，例如，

 ngOnInit() {//从json中获取数据this.httpClient.get('https://api.myjson.com/bins/n5p2m').subscribe((response: any) => {console.log("响应", response.data);response.data.forEach(元素 => {//将数据推送到用户数组this.users.push(元素);});})//尝试从服务响应数据中获取元素推送后的完整数组console.log("用户数组", this.users);//但它显示空数组}

但是我无法在 console.log("users array", this.users); 中获取数据，因为服务调用延迟了..

如何将数据推送到 this.users 中，当我们在服务外部调用时，它应该有填充的数据，而不是像现在一样为空..

还制作了一个关于它的有效堆栈闪电战

I am making angular application and where i am having an empty array like,

  users: any = [];

Then i am making a service call in ngOnInit to store the data into users array like,

  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..

How to push the data into this.users and when we call outside of the service it should have the filled data and not empty as like now..

Also made a working stackblitz regarding it https://stackblitz.com/edit/angular-q3yphw

Please see the console which has current result..

Current result in console.log("users array", this.users); is empty array [].

So i am expecting the following result in console.log("users array", this.users); outside the service and inside 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..

解决方案

Had forked you Stackblitz Demo

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.

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.data it will store your Array of Objects [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.

这篇关于Angular 订阅推送对象到数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！