问题：如何在异步Observable之后链接函数？

Question

我有一个Angular组件，它允许选择列表中的项目。 因此， onInit()应该执行以下操作：

1. 异步加载数据列表
2. 默认情况下，将数据列表的第一个元素设置为选中状态

实现此所需行为的承诺方式为：

ngOnInit() {
   // 1) Load list of items (async)
   this.loadItems()
      // 2) after async load, set default selected item
      .then(this.setDefaultSelectedItem);
}

// Calls the Service and sets `this.items` when the requested list
loadItems() {
   return this.itemsService.getAll()
      .then((items) => this.items = items);
}

this.setDefaultSelectedItem() {
   // first item on the list of items by default
   this.selectedItem = this.items[0]; 
}

我正在尝试使用rxjs和Observables实现相同的rxjs 。 到目前为止，我已经执行了以下操作：

ngOnInit() {
   // 1) load list of pharmacies
   this.loadItems();
   // 2) select as default the first one (TODO)
}

loadItems() {
   return this.itemsService.getAll()
      .subscribe(items => this.items = items);
}

this.setDefaultSelectedItem() {
   // first item on the list of items by default
   this.selectedItem = this.items[0]; 
}

我最近一直在做一些研究，阅读了有关flatMap() ，但是在loadItems()之后却无法链接setDefaultSelectedItem() loadItems() ，因此我陷入了困境。

更新：

我想避免的含量this.setDefaultSelectedItem()内.subscribe()这样的块：

loadItems() {
   return this.itemsService.getAll()
      .subscribe(items => {
         this.items = items;
         this.selectedItem = this.items[0];
      });
}

Answer 1

使用subscribe()方法中的{} ，您可以实现一件以上的事情！

loadItems() {
   return this.pharmaciesService.getAll()
      .subscribe(items => {
        this.items = items;
        this.setDefaultSelectedItem();
      });
}

---

编辑：

ngOnInit() {
   // 1) load list of pharmacies
   this.loadItems().subscribe(() => { 
     // 2) select as default the first one (TODO)
     this.setDefaultSelectedItem() 
   });
}

loadItems() {
   let obs = this.itemsService.getAll();
   obs.subscribe(items => this.items = items);
   return obs;

}

this.setDefaultSelectedItem() {
   // first item on the list of items by default
   this.selectedItem = this.items[0]; 
}

Answer 2

解决方案1-

loadPharmacies() { 
  return this.pharmaciesService.getAll() 
    .subscribe(
      items => this.items = items;
      this.setDefaultSelectedItem();
    ); 
}

解决方案2-

 loadPharmacies() { 
  return this.pharmaciesService.getAll() 
    .subscribe({
      error: err => console.log(`Oops... ${err}`), 
      complete: () => console.log(`Complete!`), 
    }); 
}

然后，您可以采用完整的方法来做您想做的任何事情。

如果您有任何疑问，请告诉我。