在 Angular 中，我如何使用 ngrx 订阅每次更改下拉值时更新的多个可观察对象

Question

我有一个下拉列表（下拉列表 a）绑定到一个可观察的集合，当它的值改变时我必须重新填充 2 个其他下拉列表（下拉列表 b 和 c），它们也使用来自的异步管道绑定到可观察的集合2 家不同的商店。

以上部分很简单，而且效果很好。我现在想在您更改下拉列表 a 的值并重新填充 b/c 时添加一个加载微调器。我有下面的方法，它在 a 改变时被调用，它似乎可以工作，但感觉不对：

setDropDownLists(dropdownAValue: string): void {
  this.loadingDropdowns = true
  this.spinner.show(this.DropdownsLoadingSpinner);

  this.storeB.dispatch(new GetBItems(dropdownAValue));
  this.storeC.dispatch(new GetCItems(dropdownAValue));

  this.dropdownB = this.storeB.select(storeBSelectorByPermission(PermissionA));
  this.dropdownC = this.storeC.select(storeCSelector);

  combineLatest([this.dropdownB, this.dropdownC])
   .pipe(
     filter(([b, c]) => b!= null && c!= null),
     take(1),
   )
   .subscribe(() => {
     this.loadingDropdowns = false;
     this.spinner.hide(this.DropdownsLoadingSpinner);
  });
}

这里感觉有些不对劲，我觉得我的做法完全错误。需要注意的几点：

我分派这些操作，因为商店可能没有加载与 dropdownAValue 相关的那些（有很多值，我认为不加载它们是一个好方法）。
第一个选择器接受一个参数，因为我必须向下过滤商店（我以 PermissionA 为例）
我曾尝试使用 combineLatest 创建一个全局可观察对象，但 [我认为] 因为每次它失去订阅时我都会覆盖可观察对象集合（这让我想知道我是否在每次更改下拉列表时都在此处创建大量订阅.

任何有关如何执行此操作的帮助或指示"right"将不胜感激。

Answer 1

cancelSpinner() {
              if (this.loadingDropdowns === 1) {
                 this.spinner.hide();
              } else {
                  this.loadingDropdowns -= 1;
              }
}

setDropDownLists(dropdownAValue: string): void {
  this.loadingDropdowns = 2;
  this.spinner.show(this.DropdownsLoadingSpinner);

  this.storeB.dispatch(new GetBItems(dropdownAValue));
  this.storeC.dispatch(new GetCItems(dropdownAValue));

  this.dropdownB = this.storeB.pipe(
          select(storeBSelectorByPermission(PermissionA)),
           filter(v => filter for empty value to make this work on startup),
           tap( () => this.cancelSpinner())
)

  this.dropdownC = this.storeC.pipe(
          select(storeCSelector),
          filter(v => ...),
          tap( () => this.cancelSpinner())
)

像这样。每次选择器发出时，点击都会运行。您可能想将选择器放在构造函数中，并在此函数中执行分派和微调器逻辑。

在 Angular 中，我如何使用 ngrx 订阅每次更改下拉值时更新的多个可观察对象

In Angular how can I use ngrx to subscribe to multiple observables that are updated each time a dropdown value is changed

observable

rxjs

typescript

ngrx

angular