Question

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

异步加载数据列表
默认情况下，将所选数据列表的第一个元素设置为

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

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来达到相同的目的。到目前为止，我已经执行了以下操作：

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() ...，但是在setDefaultSelectedItem()之后却无法链接loadItems()，我一直呆在那里。 / p>

更新：

我想避免在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!`), 
    }); 
}

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

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

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

更新：

2 个答案: