角向数组订阅推送对象

Question

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

./ec2.py --list

然后我正在SizedBox( width: 200.0, height: 200.0, child: FloatingActionButton( onPressed: () {}, ), ) 中进行服务调用，以将数据存储到 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 } 中，当我们在服务外部调用时，它应该具有已填充的数据，而不是像现在这样为空。.

还对此进行了有效的堆叠闪电战 https://stackblitz.com/edit/angular-q3yphw

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

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

当前结果为空数组 [] 。

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

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

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

Answer 1

已经分叉了您Stackblitz Demo

  

如果要在HTTP客户端响应后处理数据，则可以通过与RxJS运算符一起使用来进行操作。在管道中使用这些方法之后，当您预订其最终值时，它将直接呈现到您的模板中。

cannonBodyDef.type= b2_dynamicBody;
cannonBodyDef.userData=cannon;
cannonBodyDef.fixedRotation=true;
cannonBodyDef.position.Set(cannon->getPosition().x/SCALE_RATIO,cannon->getPosition().y/SCALE_RATIO);
cannonBody = world->CreateBody(&cannonBodyDef);
cannonBody->CreateFixture(&cannonFixture);
cannonBody->SetGravityScale(0.0f);

cannonFixture.userData = this;


wheelbodyShape.m_radius = 32 / SCALE_RATIO;
b2FixtureDef wheelFixture;
wheelFixture.shape=&wheelbodyShape;
wheelBodyDef.type= b2_dynamicBody;
wheelBodyDef.userData=wheel;
wheelBodyDef.fixedRotation=true;
wheelBodyDef.position.Set(wheel->getPosition().x/SCALE_RATIO,wheel->getPosition().y/SCALE_RATIO);
wheelBody = world->CreateBody(&wheelBodyDef);
wheelBody->CreateFixture(&wheelFixture);
wheelBody->SetGravityScale(0.0f);
wheelFixture.userData = this;


world->SetContactListener(this);


b2RevoluteJointDef rearWheelRevoluteJointDef;
rearWheelRevoluteJointDef.enableMotor = true;
rearWheelRevoluteJointDef.Initialize(cannonBody, wheelBody, cannonBody->GetWorldCenter());
_rearTireRevoluteJoint = (b2RevoluteJoint*)world->CreateJoint(&rearWheelRevoluteJointDef);

  

如果您不想使用RxJS运算符，则可以在订阅其最终值并执行手动数据操作之后仍然可以对其进行操作

     

不需要执行.forEach（）存储来自response.data的对象数组，因为Angular已经为您执行了它。因此，只要您将其分配为

     

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.users = response.data

[Object, Object, Object]

Answer 2

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

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

Answer 3

您也可以将数据存储在没有循环的数组中。

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