在Angular中,我如何使用ngrx订阅每次更改下拉列表值时更新的多个观测值
我有一个下拉列表(下拉列表a)绑定到一个可观察的集合,当它的值更改时,我必须重新填充另外两个下拉列表(下拉列表b和c),它们也使用异步管道从两个不同的存储绑定到可观察的集合 上面的部分很简单,工作也很好。现在,当您更改下拉列表a的值并重新填充b/c时,我想添加一个加载微调器。我有下面的方法,当a被更改时调用,它似乎可以工作,但感觉不对劲:在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
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请求,对吗?除非调度在上次执行时的给定时间间隔内(这是我们内置的)。