ngrx：如何组合可观察对象以在异步管道中使用

Question

我正在尝试使用 observables 和 ngrx 获取未决更改的影子副本，但我运行遇到了一个我不明白的小问题：

export class SearchBoxContainerComponent {
    filterSettings$: Observable<FilterSettings>;
    filterChanges: {[key:string]: any};
    filterChanges$: Subject<{[key:string]: any}>;
    constructor(private store: Store<fromRoot.State>) {
        this.filterChanges = {};
        this.filterChanges$ = new Subject();
        this.filterSettings$ = Observable.combineLatest(
            store.let(fromRoot.getFilterSettings),
            this.filterChanges$,
            (filterSettings, filterChanges) => {
                return Object.assign({}, filterSettings, filterChanges);
            }
        );
        this.filterChanges$.subscribe(foo => {
            console.log('filterChanges$: ', foo);
        });
        this.filterSettings$.subscribe(foo => {
            console.log('filterSettings$: ', foo);
        });
        this.filterChanges$.next(this.filterChanges);
    }

    updateSetting(key, value) {
        this.filterChanges = Object.assign({}, this.filterChanges, {[key]: value});
        this.filterChanges$.next(this.filterChanges);
    }

    submitSearchbox() {
        // TODO send ngrx action to really update the filterSettings
    }
}

这里我用的是Observable.combineLatest而不是直接用

this.filterSettings$ = store.let(fromRoot.getFilterSettings);

从 ngrx 存储中获取一个 observable。

我遇到的问题是，当我的搜索框打开时，一开始一切都是空的。只有在更新值之后，所有内容才会被填充。如果我直接用 store.let 绑定它，它就可以工作。

我在 HTML 中像这样使用异步管道

<my-component [filterSettings]="filterSettings$ | async"></my-component>

但它在 *ngIf 中，因此只有在搜索框打开后才会进行评估。我猜异步管道在所有操作发生后订阅并且没有新事件它没有获得值。但是为什么它与 store.let 一起工作呢？是不是总有一个不同的可观察值给你一个值？

问题是我做错了什么，我觉得我仍然遗漏了一些东西...额外的问题：这是一个可以中止或提交数据卷影副本的好方法吗？

Answer 1

使用 rxjs/BehaviorSubject 而不是普通的 rxjs/Subject。它将把收到的最后一个项目提供给新订阅者。

this.filterChanges = {};
this.filterChanges$ = new BehaviorSubject(this.filterChanges);

你不需要 next() 之后，因为它在构造函数上有一个值。 Observable.combineLatest() 届时应该会按预期工作。

ngrx：如何组合可观察对象以在异步管道中使用

ngrx: how to combine observables for use in async pipe

rxjs

typescript

ngrx

angular