Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/8.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
在Angular中,我如何使用ngrx订阅每次更改下拉列表值时更新的多个观测值_Angular_Typescript_Rxjs_Observable_Ngrx - Fatal编程技术网

在Angular中,我如何使用ngrx订阅每次更改下拉列表值时更新的多个观测值

在Angular中,我如何使用ngrx订阅每次更改下拉列表值时更新的多个观测值,angular,typescript,rxjs,observable,ngrx,Angular,Typescript,Rxjs,Observable,Ngrx,我有一个下拉列表(下拉列表a)绑定到一个可观察的集合,当它的值更改时,我必须重新填充另外两个下拉列表(下拉列表b和c),它们也使用异步管道从两个不同的存储绑定到可观察的集合 上面的部分很简单,工作也很好。现在,当您更改下拉列表a的值并重新填充b/c时,我想添加一个加载微调器。我有下面的方法,当a被更改时调用,它似乎可以工作,但感觉不对劲: setDropDownLists(dropdownAValue: string): void { this.loadingDropdowns = true

我有一个下拉列表(下拉列表a)绑定到一个可观察的集合,当它的值更改时,我必须重新填充另外两个下拉列表(下拉列表b和c),它们也使用异步管道从两个不同的存储绑定到可观察的集合

上面的部分很简单,工作也很好。现在,当您更改下拉列表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作为示例)
  • 我曾尝试使用CombineTest创建一个全局可观察集合,但[我认为]因为每次它失去订阅时,我都会覆盖可观察集合(这让我想知道,每次下拉列表更改时,我是否会在这里创建订阅负载)
任何关于如何做到这一“正确”的帮助或建议都将不胜感激

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

类似于这样。每次选择器发出时,点击都会运行。您可能希望将选择器放入构造函数中,并在此函数中执行分派和微调器逻辑。

谢谢,这可能会实现,但不一定是我考虑过的方法。明天将尝试,并在一切正常后接受。因此当
a
changes,您必须对
b
c
发出HTTP请求,对吗?除非调度在上次执行时的给定时间间隔内(这是我们内置的)。