Question

我不太了解Angular和反应式编程，我正在为这个问题而苦苦挣扎。

我有一个名为ManagerService的服务，该服务存储了我的应用程序使用的一些静态数据。该服务的构造函数调用WebService，该服务从服务中检索数据。

  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；

程序的当前流程为：

调用构造函数，启动API调用
getRandomItem（）称为（失败）
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];
 }

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

1 个答案: