在 ngOnInit 中获取未定义的变量答案

【问题标题】：Getting undefined variable in ngOnInit在 ngOnInit 中获取未定义的变量
【发布时间】：2019-10-18 23:08:18
【问题描述】：

在ngOnInit() 函数中，我从服务接收数据，以供整个组件的其余部分使用。我的问题是，在我将这些数据保存在一个变量中之后，它在订阅之外的任何地方都是未定义的。我不知道为什么。

代码：

export class HomeComponent implements OnInit {

  imagesPerRow: number;

  constructor(private backend : HttpService) {
  }

  ngOnInit() {
    this.backend.getGrid().subscribe((data)=>{
      console.log("1: " + data);
      this.imagesPerRow = parseInt(data);
      console.log("2: " + this.imagesPerRow);
    });

    console.log("3: " + this.imagesPerRow);
  }
}

我的 chrome 控制台输出：

3: undefined
1: 2
2: 2

【问题讨论】：

标签： angular

【解决方案1】：

this.backend.getGrid() 是 observable 类型，所以它被异步调用。 console.log("3: " + this.imagesPerRow); 在它之外，所以这条线首先被执行。因此你得到undefined。它在可观察函数中声明

【讨论】：

当您检查日志输出时，您已经自己回答了这个问题：首先打印日志“3”，然后再接收或设置数据（“1”，“2”）。原因很简单：订阅块中的代码在数据准备好时触发，而“3”的日志输出在订阅后立即执行。
一旦订阅块被执行，imagesPerRow 将在 HTML 中自动更新。正如您在 console.log 中看到的那样。在第二行中，变量不再是未定义的