5

プレーンstring[]をに変換し、Observable<string[]>それを既存の に連結しようとしていObservable<string[]>ます。

次に、angular2asyncパイプを使用して を表示しObservableます。

これが私のコードです:

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 <string[]>;

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

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

誰でも助けてもらえますか?

Observable<string[]>さらに、 EventSource が繰り返し呼び出されるときに、サービス インスタンスが継続的に更新されるようにしたいと考えています。サブスクライブ ロジックは適切な場所にありますか?

編集1:次のようにRxJSconcatオペレーターを使用しようとしました:

    this.someObservable$.subscribe(
        theStrings=> {
            console.log(theStrings);
            this.someObservable$ = this.someObservable$.concat(Observable.create(theStrings));
        },
        error=>console.log(error)
    );
 }

angular2 パイプと一緒にasync:

<ul>
    <li *ngFor="#s of appService.someObservable$ | async">
       a string: {{ s }}
    </li>
</ul>

ページには何も表示されません。文字列がコンソールに表示されるだけです...

私が間違っているのは何ですか?

編集2:アプリはこちらのgithubで入手できます

編集 3async : Thierry のアドバイス、特にサブスクライブするためのパイプの使用とスキャン オペレーターの使用を考慮しました。

今残っている唯一の問題は、文字列をテンプレートにレンダリングするためにルーター リンクをクリックする必要があることです... テンプレートは自動的に更新されません...

github のプロジェクトと関連するタグを参照してください: https://github.com/balteo/demo-angular2-rxjs/tree/36864628/536299

4

1 に答える 1