Angular订阅推送对象到数组

Posted 2023-03-13

【中文标题】Angular订阅推送对象到数组

【英文标题】：Angular subscribe push object to array

【发布时间】：2019-05-09 20:06:48

【问题描述】：

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

  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，当我们在服务外部调用时，它应该有填充的数据，而不是像现在这样为空..

还针对它进行了工作堆栈闪电战 https://stackblitz.com/edit/angular-q3yphw

请查看具有当前结果的控制台..

console.log("users array", this.users); 中的

当前结果是空数组[]。

所以我期待在console.log("users array", this.users);服务外和ngOnInit内出现以下结果，

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

由于我是 Angular 新手，请帮助我达到预期的结果..

【参考方案1】：

分叉了你Stackblitz Demo

如果你想在 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() 来存储 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.

【讨论】：

this.httpClient .get('https://api.myjson.com/bins/n5p2m') .subscribe((response:any) => this.users = response.data); console.log("users array", this.users); 这个仍然显示空数组..

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

这里例如我已经展示了这样，但在我的实际应用程序中，我需要循环遍历数组并将元素推送到它并获得最终结果..

无论何时你想从 HTTP 获取一些东西，你都需要在里面订阅它的值并在那里执行你的数据操作。更新了我与服务集成共享的分叉 Stackblitz 演示链接，并使用了 Subject observable

谢谢..，但也保留RxJS operators stackblitz.. 我认为这是处理的最佳解决方案..

【参考方案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);  
  )            

【参考方案3】：

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

更详细地说，您可以将 http get 请求包装在一个返回 Observable 的方法中，然后订阅该方法并等待它返回结果，然后再执行 log 语句。