Rxjs 扫描不触发 combineLatest

Question

I am battling with combineLatest and scan rxjs operators (with Angular 8). Basically, I am displaying a list that can be filtered.

So I have a first Observable list$ = this.api.getAll()
and a second one filteredList$ = combineLatest(this.list$, this.form.valueChanges())
and, in my HTML, I'm displaying filteredList$ content using filteredList$ | async filteredList$ | async . This works fine (meaning, any change in the form update my filteredList$ )

However, the end user is able to update one element of the list; when he does, I update my list$ Observable this way:

this.api.update(listElement)
    .subscribe((updatedElmt) => {
         this.list$ = this.list$.pipe(
            concatMap(value => of(...value)),
            scan((acc, listElmt) => listElmt._id === updatedElmt._id ? [...acc, updatedElmt] : [...acc, listElmt], []),
        );
    });

This also works well.
However, the combineLatest is not triggered and therefore, my UI is never updated until I refresh my page. I assume it is because the list$ pointer has not change, so theere's no reason for the combineLatest to be triggered; but how can I force it?

BTW, using changeDetector to detectChanges or markForCheck does not work.

Answer 1

You can force both with a conditional and concatenate them;

concat(list$, filteredList$).subscribe(function() {/*do something */});

Answer 2

What exactly is it you want to achieve? If it is changing the updated Element in your list then you should consider something like this:

1. Define your List as Subject:

    this.list$ = new Subject<ListType[]>();

2. Get the current list and next the list$

    this.api.getAll().subscribe(this.list$.next); // dont forget to unsubscribe or youll get a memory leak

3. Observe for updates:

    updateList$ = this.api.update(listElement).pipe( withLatestFrom(this.currentList$), map(([updatedElement, currentList]) => { return currentList.map(listElement => listElement._id === udaptedElement._id? updatedElement: listElement), }) ).subscribe(this.list$.next) // dont forget to unsubscribe (takeUntil()) should work here

4. Combine your list$ with valueChanges

   combineLatest([this.list$, this.form.valueChanges()])).pipe(....)

this.list$ =... sets a new value to the property, but combineLatest ist subscribing to the old value of this.list$. Which will result in a memory leak.

this.list$ = someObservableFunc$(); // gives first Observable<any>
const observeList$ = combineLatest([this.list$, otherObservable$]); // gives combination of first Observable<any> and otherObservable$
this.list$ = anotherObservableFunc$(); // gives second Observable<any> but observeList$ keeps subscription to first Observable<any>

Answer 3

A Similar Problem

Consider the following code:

let a = 1;
const b = 2;
const c = a + b;
a = 10;
console.log(c);

I'm sure you've seen this sort of thing before. Of course, this prints 3 ( 1 + 2 ) and not 12 ( 10 + 2 ). So the question "how do I force c to be 12 here?" is a tough question to answer.

The answer might be to remove c entirely.

let a = 1;
const b = 2;
a = 10;
console.log(a + b);

But if you want to be able to reference c later, this doesn't really work. Maybe you could thunk c (make it a parameterless function) and invoke it to get a lazy value.

let a = 1;
const b = 2;
const c = () => a + b;
a = 10;
console.log(c());

These sorts of problems have as many solutions as there are stars and they all depends on what you're trying to accomplish. There's no silver bullet.

---

A Possible Solution

You're using RxJS, so I think it fits to lean on some of that machinery in order to accomplish your goal.

Instead of having list$ be an api observable, why not subscribe your list$ to that observable somehow instead. Of course, to do that, you'd need list$ to be both an observable (stream of value) and an observer.

Fortunately, RxJS comes with a few constructs that do this already. You can read up a bit on Subjects, as I'll use a ReplaySubject here (but perhaps a Subject or BehaviourSubject is better suited to the job. Depends on your needs).

// list$ is an observable **and** and observer
const list$ = new ReplaySubject();

// Tell list to observe the api
this.api.getAll().subscribe(this.list$);

// Keep this as-is
filteredList$ = combineLatest(this.list$, this.form.valueChanges())

// To update
combineLatest(this.list$, this.api.update(listElement)).pipe(
  take(1),
  map(([list, updatedElmt]) => list.map(listElmt => 
    listElmt._id === updatedElmt._id ? updatedElmt : listElmt
  ))
).subscribe(this.list$);

This isn't the cleanest possible solution since you need to re-create your update logic each time an update comes in, but it's still relatively close to what you had before.