使用Angular中的subscribe将对象添加到数组中

Question

我正在创建一个 Angular 应用程序，其中有一个空数组：

  users: any = [];

然后我在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
  }

但是由于服务调用会有延迟，所以我无法在console.log("users array", this.users);中获取数据。

请问如何将数据推入this.users中，并且在服务外部调用时应该有填充的数据，而不是像现在一样为空。

此外，关于此问题我也创建了一个可工作的stackblitz，请参考https://stackblitz.com/edit/angular-q3yphw。

请查看控制台中的当前结果。 console.log("users array", this.users);中的当前结果是空数组[]。

因此，我期望在服务外部和ngOnInit内部的console.log("users array", this.users);中得到以下结果。

[
{"id":1,"value":"User One"},
{"id":2,"value":"User Two"},
{"id":3,"value":"User Three"}
]

我是angular的新手，请帮助我实现预期的结果。

- Maniraj Murugan

Answer 1

我已经为你创建了一个 Stackblitz演示

如果您想在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);

如果您不想使用 RxJS 操作符，那么在订阅其最终值后仍然可以手动操作数据。无需执行 .forEach() 来存储来自响应数据的对象数组，因为 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.

- KShewengger

---

我的需求在服务调用之外，我需要获取this.users中填充的数据。 - Maniraj Murugan

每当您想从HTTP获取某些内容时，您需要在内部订阅其值并在那里执行数据操作。我已更新了我分享的带有服务集成和使用Subject可观察对象的分叉Stackblitz演示链接。 - KShewengger

还添加了一个过滤器函数到.subscribe中，Angular能够在模板上呈现结果。 - KShewengger

谢谢，但也请保留RxJS操作符的stackblitz。我认为这是处理问题的最佳解决方案。 - Maniraj Murugan

@undefined 谢谢，我已经更新了 Stackblitz 代码，使用了 rxjs 操作符。根据您的喜好，添加了两种方法来发出相同的值。请查看 app.service.ts。 - KShewengger

Answer 2

你可以不使用循环也将数据存储在数组中。

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

- Sachin Shah

Answer 3

Angular可以使用Promise和Observable来处理异步操作，例如此http get请求。关于这个概念有很多信息，这里是一个很好的起点：Promise vs Observable。

为了进一步阐述，您可以将http get请求封装在一个返回Observable的方法中，然后订阅该方法并等待它返回结果，然后执行日志语句。

- Derek