除ngOnInit()之外的另一个函数中的空数组

Question

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

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

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

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

此时CCD_ 1是一个空数组。为什么会发生这种情况，以及如何解决？

Answer 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");