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商店获得一个观察点。

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

我在我的HTML中使用异步管道

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

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

问题是我做错了什么，我得到的印象是我仍然遗漏了一些东西......奖金问题：这是一个很好的方法可以中止或提交数据的影子副本吗？< / p>

Answer 1

使用rxjs/BehaviorSubject代替普通rxjs/Subject。它会将收到的最后一项提供给新订阅者。

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

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

ngrx：如何组合observable以用于异步管道

1 个答案: