在 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 创建一个全局可观察对象，但 [我认为] 因为每次它失去订阅时我都会覆盖可观察集合（这让我想知道每次下拉列表更改时我都会在此处创建订阅负载。

任何有关如何“正确”执行此操作的帮助或指示将不胜感激。

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())
)

类似的东西。每次选择器发出时，水龙头都会运行。您可能希望将选择器放在构造函数中，并在此函数中执行调度和微调器逻辑。