Angular 4-从服务中获取数据并存储在组件中

Question

我在Angular中设置了服务，以从REST Web服务获取JSON数据。 现在，我在OnInit方法中使用服务中的数据，并将其存储在本地数组中。 但是当我访问它们时，它显示为undefined 。 服务运行正常，检查数据是否到来。 对不起英语不好，不是母语。

constructor(private myService: MyService, private anotherService: AnotherService) {}

arr: any[];
arr2: any[];

ngOnInit() {
 this.myservice.getData(12).subscribe((data) => {
  this.arr = data;
 });
 for (let item of this.arr) {
  if (item.id == 5) {
   this.arr2.push(item);
  }
 }
 console.log('Data - ', this.arr2); // --> This shows undefined :(
}

但这在我从OnInit调用自定义方法时有效

constructor(private myService: MyService, private anotherService: AnotherService) {}

arr: any[];
arr2: any[];

ngOnInit() {
 this.myservice.getData(12).subscribe((data) => {
  this.arr = data;
  this.stage();
 });
}

stage() {
for (let item of this.arr) {
  if (item.id == 5) {
   this.arr2.push(item);
  }
 }
 console.log('Data - ', this.arr2); // --> This shows data :)
}

有人帮助理解原因。 谢谢

Answer 1

您需要从内部的.subscribe()外部移动代码。 .subscribe()中的代码是异步的，这意味着它下面的代码将立即执行，而不是等待.subscribe()的代码完成。

Answer 2

旧的异步调用问题。

ngOnInit() {
 this.myservice.getData(12).subscribe(...);
 for (let item of this.arr) {...}
 console.log(...);
}

第一行，您通过异步调用请求数据。 基本上来说：

去获取数据，并在有数据时执行我在subscribe.告诉您的操作subscribe.

发出此命令后，代码将继续运行。

这意味着，如果您的呼叫需要10秒钟才能完成，Angluar不会等待10秒钟才启动for循环： 它将立即运行 。

这就是为什么您看不到数据的原因。 它在订阅功能之外。