Convert a plain string[] into a Observable<string[]> and concat it to another Observable<string[]> using RxJS 5
<p>I am trying to convert a plain <code>string[]</code> into a <code>Observable&lt;string[]&gt;</code> and concat it to an existing <code>Observable&lt;string[]&gt;</code>.</p>

<p>I will then use an angular2 <code>async</code> pipe in order to display the <code>Observable</code>.</p>

<p>Here is my code:</p>

<pre><code>import {Injectable} from "angular2/core";
import {Observable} from "rxjs/Observable";
import 'rxjs/Rx';


@Injectable()
export class AppService {

    constructor() {
        console.log('constructor', 'appService');
        this.constructSomeObservable();
    }

    someObservable$:Observable &lt;string[]&gt;;

    constructSomeObservable() {
        this.someObservable$ = Observable.create(observer =&gt; {
            const eventSource = new EventSource('/interval-sse-observable');
            eventSource.onmessage = x =&gt; observer.next(JSON.parse(x.data));
            eventSource.onerror = x =&gt; observer.error(console.log('EventSource failed'));
            return () =&gt; {
                eventSource.close();
            };
        });

        this.someObservable$.subscribe(
            theStrings=&gt; {
                console.log(theStrings);
                //Somehow convert the plain array of strings to an observable and concat it to this.someObservable$ observable...
            },
            error=&gt;console.log(error)
        );
    }
}
</code></pre>

<p>Can anyone please help?</p>

<p>Furthermore, I want to ensure that the service instance <code>Observable&lt;string[]&gt;</code> is continuously updated as the EventSource is called repeatedly. Is my subscribe logic in the right place?</p>

<p><strong>edit 1</strong>: I tried to use RxJS <code>concat</code> operator as follows:</p>

<pre><code>    this.someObservable$.subscribe(
        theStrings=&gt; {
            console.log(theStrings);
            this.someObservable$ = this.someObservable$.concat(Observable.create(theStrings));
        },
        error=&gt;console.log(error)
    );
 }
</code></pre>

<p>together with the angular2 <code>async</code> pipe:</p>

<pre><code>&lt;ul&gt;
    &lt;li *ngFor="#s of appService.someObservable$ | async"&gt;
       a string: {{ s }}
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>and nothing gets displayed on the page; the strings just get displayed on the console...</p>

<p>What I am getting wrong?</p>

<p><strong>edit 2</strong>: The app is available on github <a href="https://github.com/balteo/demo-angular2-rxjs" rel="nofollow">here</a></p>

<p><strong>edit 3</strong>: I have taken into account Thierry's advice, especially the use of the <code>async</code> pipe in order to subscribe as well as the usage of the scan operator.</p>

<p>The only remaining issue now is that I need to click on the router link in order for the strings to render on the template... The template does not update automatically...</p>

<p>See project on github and relevant tag: <a href="https://github.com/balteo/demo-angular2-rxjs/tree/36864628/536299" rel="nofollow">https://github.com/balteo/demo-angular2-rxjs/tree/36864628/536299</a></p>