除了ngOnInit（）之外的另一个函数中的空数组[重复]答案

【问题标题】：Empty array in another function except ngOnInit() [duplicate]除了ngOnInit（）之外的另一个函数中的空数组[重复]
【发布时间】：2021-05-30 06:37:32
【问题描述】：

当我等待来自 API 的一组项目时，它成功接收并分配给变量。

async ngOnInit(): Promise<void> {
    this.items = await this.apiService.getItems().toPromise();
}

但是当我尝试从另一个函数调用它时，例如，分配给模板中的点击事件，它收到空。

getSomeValue() {
    var value = this.items;
}

this.items 当时是一个空数组。为什么会发生这种情况以及如何解决？

【问题讨论】：

在那个订阅了他的 API 的问题中，我反而在等待它，并相信在 ngOnInit 钩子完成后这些数据将可用。在我的示例中，当用户单击按钮时从模板调用 getSomeValue()，此时 ngOnInit 已经完成。所以我不明白为什么这些数据在等待后立即可用，但在另一个调用了很长时间的函数中却没有。
可以将一个方法标记为async，并且仍然可以在不使用await 的情况下调用它，这就是你正在发生的事情。内部角度不使用await，因此代码执行不等待异步 api 调用的结果。 StackBlitz sample | Mozilla Docs for async functions

标签： javascript angular typescript

【解决方案1】：

看起来您在我们从服务获取数据之前触发了点击事件。

解决方法是为按钮添加禁用属性

<button [disabled]="!items">Get some value</button>

或完全隐藏它，除非我们没有任何数据。

<button *ngIf="items">Get some value</button>

编辑：

根据您的评论，async 函数中的 awaits 会停止执行该函数本身中的以下语句，而不是停止其他钩子的执行。

https://stackoverflow.com/a/42833744/2078685可以帮助你更好地理解

按照下面的例子，你会看到

Hi
lo
1

不是你想的那样

async function foo() {
      console.log("hi");
      return 1; 
    }
    
    async function bar() {
      const result = await foo();
      console.log(result);
    }
    
    bar();
    console.log("lo");

【讨论】：