等待填充通过 API 在构造函数中启动的数据

Question

我对Angular和响应式编程不太了解，我正在努力解决这个问题。

我有一个名为ManagerService的服务，用于存储我的应用使用的一些静态数据。 此服务的构造函数调用从服务检索数据的 Web 服务。

constructor(private apiService: APIService) {
this.apiService.getData()
.subscribe((result: APIResponse) => {
this.mylist = result.responseObject;
});
}

这工作正常，但大约需要 800 -> 900 毫秒才能完成。这将在未来需要更长的时间，因为会有更多的数据。 此数据是静态的，并且由于需要一段时间，因此对服务器的 API 调用应仅在启动服务时执行一次。

同时，我有一个组件，加载时会启动服务。
然后在ngOnInit()中，它会调用服务上的另一种方法，以随机返回一些静态数据。

this.item = this.manager.getRandomItem();

然后稍后将多次再次调用。

这是ManagerService中称为的方法

public getRandomItem() {            
const index = Math.floor((Math.random() * this.myList.length) + 1);   
return this.myList[index];
}

问题是，当第一次调用getRandomItem()方法时，变量myList尚未填充;

程序的当前流程为：

1. 构造函数被调用，启动 API 调用
2. getRandomItem() 调用(失败)
3. API 调用返回并填充 myList

我想不出一种方法可以让这种方法等待数据填充到myList中。

Answer 1

ngOnInit(): void {
this.apiService.getData().pipe(map(list => getRandomItem(list))).subscribe(result 
=> ...)
}
public getRandomItem(myList: []) {            
const index = Math.floor((Math.random() * myList.length) + 1);   
return myList[index];
}