计数行变量的值给我 undefined 虽然我分配了它？

Question

我在 Angular 7 上工作，我面临问题计数行变量给我未定义的值

虽然返回的数据是 3

我需要的预期结果是 Count rows must equal 3

public Countrows:Number;
ngOnInit(): void {
countitems()
console.log("final count rows is" + this.Countrows);

}
countitems()
 {
  this._inventory.GetcountItems().subscribe(
    data =>this.Countrows=data[0].countItems 

  )
 }

虽然返回的数据值为 3，但它给了我最终数据未定义

count items 函数返回的数据

[
    {
        "countItems": 3
    }
]

我尝试过的：

console.log("final data" + data[0].countItems)
give me on console as 
final data 3

Answer 1

该值仅在回调上设置，而不是您console.log它的位置

 this._inventory.GetcountItems().subscribe(data => {
   console.log("final data" + data[0].countItems); // will work
   this.Countrows = data[0].countItems;
 });

---

伪代码

component.html

<p>{{ countRowsDisplay }}</p>

component.ts

public countRows = 0;
public countRowsDisplay = '';
ngOnInit(): void {
  this.getCountItems();
  // below line won't work. called before subscription
  // this.displayCountItems();
}

getCountItems() {
  this._inventory.GetcountItems().subscribe(data => {
    this.countRows = data[0].countItems;
    this.displayCountItems(); //works
  });
}

displayCountItems() {
  this.countRowsDisplay = `Rows returned: ${ this.countRows }`;
}