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.
执行我要求你做的事情

一旦给出此订单，代码将继续运行。

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

这就是您没有看到数据的原因。它在订阅功能之外。

Angular 4 - 从Service获取数据并存储在Component中

2 个答案: