如何使用 Rxjs startWith 使用外部 observable 的值向 withLatestFrom 提供默认初始值？

Question

this works, but I don't want to use null for initial values of startDate and endDate, I need to initialize with the values from another observable, the userInfo$ in the code below:

export interface IUserInfo {
    UserEntryStartDate: Date;
    UserEntryEndDate: Date;
    // ...
}


public userInfo$: Observable<IUserInfo>;

private dateFilterSubject = new Subject<{
    startDate: Date;
    endDate: Date;
}>();

        this.userInfo$
            .pipe(
                withLatestFrom(
                    this.dateFilterSubject.pipe(
                        startWith({
                            startDate: null,
                            endDate: null
                        })
                    )
                )
            )
            .subscribe(([userInfo, dateFilters]) => {
                // ... do stuff
            }

This is what I'd like to do

        this.userInfo$
            .pipe(
                takeWhile(() => this.active),
                withLatestFrom(user => // userInfo from outer observable
                    this.dateFilterSubject.pipe(
                        startWith({
                            startDate: user.UserEntryStartDate,
                            endDate: user.UserEntryEndDate
                        })
                    )
                )
            )
            .subscribe(([userInfo, dateFilters]) => {
                // do stuff
            }

It even gives correct autocomplete and typing on the user parameter, however I get an error on the subscribe of:

Type 'Observable<{ startDate: Date; endDate: Date; } | { startDate: Date; endDate: Date; }>' must have a '[Symbol.iterator]()' method that returns an iterator.

What am I doing wrong?

Answer 1

You can use BehaviorSubject for the same. Here you can set the default value.

Example:

private user = new BehaviorSubject<string>('john');

In your case:

private dateFilterSubject = new BehaviorSubject<{
  startDate: Date;
  endDate: Date;
 }>({{value}});

For more info please refer:

https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject

Hope this will help.