Asynchronous change of an element in BehaviorSubject

1
votes

I ran into a problem. I use the service to store the array, in the parent component I do For the array and I pass to the child component of the array element, the array BehaviorSubject, both components have the Onpush strategy, From within the child component, the calling method is changing the array element through the service. So if the changes are made at once, then the changes are drawn in the child component, and if there is a delay, then no.

How can I fix the problem?

stackbiz: https://stackblitz.com/edit/angular-vywwsb

1
angularrxjs

1 Answers

0
votes

Here is the solution Stackblitz

I assume the problem is related to some bug involving the immutability of immutable.js and angular's change detection. The fix that I applied is just to pass the data coming from the stream trough a function that creates and returns new object, so that ngChangeDetection can be triggered.

*In the following code sinppet data is BehaviorSubject of immutable.js List BehaviorSubject(List(array_of_objects)); 

// OLD
<ng-container *ngFor="let item of (data |async );
                trackBy: trackByFn;
                let first = first">
            {{item['list'].send}}
            <app-item [item]="item" [first]="first"></app-item>
</ng-container>

//FIX
<ng-container *ngFor="let item of (data |async );
                trackBy: trackByFn;
                let first = first">
            {{item['list'].send}}
            <app-item [item]="func(item)" [first]="first"></app-item>
</ng-container>

//WHERE func

func(obj){
return ({...obj})
}