rxjs: How can I make "from" Observable emit values after subscription? - rxjs

Question

I've created a normal string array and steemed out an observable from it using "from"
import { from } from 'rxjs';
const strArr = ['aaa', "bbb", "ccc"];
const fsa = from(strArr);
If I push a value to the original array before subscribing, I get that value in the data stream.
strArr.push("coke")
fsa.subscribe(
x=>console.log(x) // outputs -> aaaa bbbb cccc coke
)
However if I push another element to the original array before the subscription, nothing happens (it doesn't behave reactively)
strArr.push("coke")
fsa.subscribe(
x=>console.log(x) // outputs -> aaaa bbbb cccc coke
)
strArr.push("pepsi") // Still outputs -> aaaa bbbb cccc coke.
I was expecting fsa Observable to react to every element added to the original array since it is created "from" this one.
Why causes this behavior?
Thanks.

Answer 1

Another alternative is to combine BehaviorSubject with javascript Proxy to watch for every type of changes in array
import {BehaviorSubject,Subject} from 'rxjs'
var originalArray = [];
const arrayChange=new BehaviorSubject(originalArray)
arrayChange.subscribe(console.log)
var arrayChangeHandler = {
set: function(target, property, value, receiver) {
console.log('setting ' + property + ' for ' + target + ' with value ' + value);
target[property] = value;
// you can emit more context to the stream if you wish
arrayChange.next(target)
// you have to return true to accept the changes
return true;
}
};
var arrayProxy = new Proxy( originalArray, arrayChangeHandler );
arrayProxy.push(1)
arrayProxy.push(2)
arrayProxy.pop()

Answer 2

with an array it's not so easy, but instead of an array you can use a Subject.
The question: do you need to you an array, or is it fine to use a Subject instead?
const stream$ = new ReplaySubject();
stream$.next('aaa');
stream$.next('bbb');
stream$.next('ccc');
stream$.subscribe(console.log); // [aaa bbb ccc]
stream$.next('ddd');
stream$.subscribe(console.log); // [aaa bbb ccc ddd], and the first subscription gets just 'ddd'.
If you want to listen to changed in an array, the best way would be to write an own Observable that overrides push method and emits into the stream. Let me know if it's the case you want and I can update the code sample.

Answer 3

I found a solution for what I'm trying to do. (Have the observer reacting to further changes in the array after the subscription, I hope it can help to those with similar questions:
import { ReplaySubject } from 'rxjs';
const rSubject$ = new ReplaySubject();
const rSubjAsObs = rSubject$.asObservable();
// string
const str = "I am afraid I can not do that, Dave";
//string no spaces
let strNoSpace = str.replace(/\s+/g, '');
//word array
let srtArr = str.split(' ');
srtArr.forEach(word=>rSubject$.next(word))
rSubjAsObs.subscribe(
data=>console.log(data)
)
rSubject$.next("...said the good machine");