Angular component field array is not filled by Observable - arrays

Question

I have problem with understanding rxjs Observable cooperation with Angular components and their lifecycles (?). I will now describe code pasted below.
I got CartComponent, which holds array of files that have been added to cart.
There is service that provides observables that add or remove files from filesArray (i use checkbox to add/remove). After adding a couple of files to cart, I expected that I would be able to use filesArray in SearchComponent (I used DI). Unfortunately, filesArray is empty in that scope, despite it's content is displayed in cart view properly. I don't understand such behavoir.
Why array is empty and how can I fix that problem? Please help.
CartComponent:
#Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit, OnDestroy {
filesArray: file[] = [];
constructor(private modalService: NgbModal, private cartService: CartService) {
}
open(content) {
this.modalService.open(content);
}
ngOnInit(): void {
this.cartService.addFileToCart$.pipe(
takeUntil(this.componentDestroyed)
).subscribe(file => {
this.filesArray = [...this.filesArray, file];
});
this.cartService.removeFileFromCart$.pipe(
takeUntil(this.componentDestroyed)
).subscribe(file => {
const fileIndex = this.filesArray.indexOf(file);
this.filesArray.splice(fileIndex,1);
});
}
private componentDestroyed: Subject<void> = new Subject();
ngOnDestroy(): void {
this.componentDestroyed.next();
this.componentDestroyed.unsubscribe();
}
}
SearchComponent:
#Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
constructor(private cartComponent: CartComponent) {
}
private checkOrderedFiles() {
console.log(this.cartComponent.pcFilesArray); //empty
}
CartService:
#Injectable({
providedIn: 'root'
})
export class CartService {
addFileToCart$: Subject<PCFile> = new Subject();
removeFileFromCart$: Subject<PCFile> = new Subject();
constructor() { }
}
Checkbox change event handler - I emit values to subjects here:
addOrRemoveFileFromCart(checkbox, item) {
if(checkbox.checked) {
this.cartService.addFileToCart$.next(item);
} else {
this.cartService.removeFileFromCart$.next(item);
}
}
EDIT:
public readonly files = this.cartService.addFileToCart$.pipe(
scan((filesArray: any, file) => [...filesArray, file], []),
share()
);
template
<div *ngFor="let file of files | async">
{{file.id}}
</div>

Answer 1

Do not use Observables that way in CartComponent. Instead write:
#Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent {
public readonly files = biscan(
this.cartService.addFileToCart$,
this.cartService.removeFileFromCart$,
(filesArray, file) => [filesArray, file],
(filesArray, file) => filesArray.filter(f => f !== file),
[]
),
startWith([]),
);
constructor(private modalService: NgbModal, private cartService: CartService) {
}
open(content) {
this.modalService.open(content);
}
}
In the template use files | async wherever you are currently using fileArray.
In other components, use files as an Observable wherever you are currently using fileArray or pcFileArray.
The underlying issue is that checkOrderedFiles is never invoked — if you write code invoking it, that code never knows when fileArray has changed.
Intuitively, you are trying to "escape" from the Observable, to get your changes back into the static world of the component. That just isn't possible. Once a calculation is in the asynchronous land of Observables, it stays there.
Unfortunately biscan() (a two-Observable variation of scan) is not currently in the library, but you can write it as
const biscan = (leftObs, rightObs, leftFcn, rightFcn, initialValue) =>
new Observable(observer => {
let acc = initialValue;
// this function must be called *twice* (once for left,
// once for right) before the observer is completed.
let complete = () => {
complete = () => observer.complete();
};
const makeSub = (obs, f) => obs.subscribe(v => {
acc = f(acc, v);
observer.next(acc);
},
e => observer.error(e),
() => complete()
);
const leftSub = makeSub(leftObs, leftFcn);
const rightSub = makeSub(rightObs, rightFcn);
return () => {
leftSub.unsubscribe();
rightSub.unsubscribe();
};
});
Edit: fixed typos in biscan()

Answer 2

I resolved that issue with help of Malvolio (wouldn't figure it out by myself for sure). I post working code below, because i suppose that piece posted had some syntax errors. I was having a problem with async pipe, i believe it's because content of CartComponent template is inside modal. I resolved it by manually subscribing.
export class CartComponent implements OnInit, OnDestroy {
filesArray;
private componentDestroyed: Subject<void> = new Subject();
biscan = (leftObs, rightObs, leftFcn, rightFcn, initialValue) =>
new Observable(observer => {
let acc = initialValue;
let complete = () => observer.complete();
const makeSub = (obs, f) => obs.subscribe(v => {
acc = f(acc, v);
observer.next(acc);
},
e => observer.error(e),
() => complete()
);
const leftSub = makeSub(leftObs, leftFcn);
const rightSub = makeSub(rightObs, rightFcn);
return () => {
leftSub.unsubscribe();
rightSub.unsubscribe();
};
});
public readonly files = this.biscan(
this.cartService.addFileToCart$,
this.cartService.removeFileFromCart$,
(filesArray, file) => {
filesArray.push(file);
return filesArray;
},
(filesArray, file) => {
filesArray.splice(filesArray.indexOf(file), 1);
return filesArray;
},
[]
).pipe(takeUntil(this.componentDestroyed));
constructor(private cartService: CartService) {}
ngOnInit(): void {
this.files.subscribe(files => this.filesArray = files);
}
ngOnDestroy(): void {
this.componentDestroyed.next();
this.componentDestroyed.unsubscribe();
}
}