プレーン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