は、観察可能<string[]>にプレーンな文字列[]に変換して、私は<code>Observable<string[]></code>に平野<code>string[]</code>を変換し、既存の<code>Observable<string[]></code>にそれをCONCATしようとしていますRxJS 5

Question

を使用して別の観察可能 にそれをCONCAT。

次に、Observableを表示するために、angle2 asyncパイプを使用します。ここで

は私のコードです：

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) 
     ); 
    } 
} 

は誰でも助けてくださいことはできますか？

さらに、EventSourceが繰り返し呼び出されると、サービスインスタンスObservable<string[]>が確実に更新されるようにしたいと思います。私の購読ロジックは正しい場所にありますか？ angular2 asyncパイプと一緒に

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

：

編集1は、次のように私はRxJS concat演算子を使用しようとした

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

と何ページに表示されます。文字列はコンソールに表示されます...

何が間違っていますか？

編集2：アプリはgithubの上で利用可能であるhere

編集3：私はの利用だけでなく、サブスクライブするために、アカウントティエリーのアドバイスにasyncパイプの特に使用をとっていますスキャンオペレータ

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

githubの上の参照プロジェクトと関連するタグ：https://github.com/balteo/demo-angular2-rxjs/tree/36864628/536299

Answer 1

私はscan演算子を利用します。ここにサンプルがあります：

@Component({ 
    selector: 'app' 
    template: ` 
    <div> 
     <div *ngFor="#elt of someObservable$ | async">{{elt.name}</div> 
    </div> 
    ` 
}) 
export class App { 
    constructor() { 
    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(); 
     }; 
    }) 
    .startWith([]) 
    .scan((acc,value) => acc.concat(value)); 
    } 
} 

これは対応するplunkr：https://plnkr.co/edit/St7LozX3bnOBcoHaG4uM?p=previewです。

• Angular 2 AsynPipe isn't working with an Observable