Angular 订阅推送对象到数组

问题描述

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

 用户: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

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);

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 订阅推送对象到数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！