AngularJSのBehaviourSubjectのHTTPレスポンスのキャッシングとネクション2/4

Question

jsonをレンダリングするためのHTTPコールを持つ2つの兄弟コンポーネントがあります。 OnInitでは、コンポーネントBがサービスを呼び出すHTTP応答を取得し、画面を読み込みます。 コンポーネントAのクリックイベントは、コンポーネントBがデータを更新するようにする必要があります。

私はからObjectiveTCによって投稿答えを追った - これがうまく働いた>What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

_docdata: BehaviorSubject<DetailSection[]> = new BehaviorSubject<DetailSection[]>([]); 

service.getData(){return this.http.get(this.url) 
     .map((res) =>{this._docdata = (res.json()); console.log("1st return"); return this._docdata; })  
     .catch((error:any) => Observable.throw(error|| 'Server error')); } 

。

refresh(){ 
this.http.get("../../assets/reqd-detail.json") 
     .map(res => res.json()) 
     .subscribe((data:Array<DetailSection>) => this._docdata.next(data)); 
} 

getting error --> ERROR TypeError: _this._docdata.next is not a function at SafeSubscriber._next (detail.service.ts:156) at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238) at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185) at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125) at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (

Answer 1

問題はとして観察できない（つまり、Array型である）を使用すると、レスポンスオブジェクトに_docDataをオーバーライドしている地図の関数内です。そして、それは次の機能を持っていません。

この

_docdata: BehaviorSubject<DetailSection[]>; 

service.getData(){return this.http.get(this.url) 
     .map((res) =>{ 
      let detailSections = res.json(); 
      this._docdata = new BehaviorSubject<DetailSection[]>(detailSections); 
      console.log("1st return"); 
      return detailSections; })  
      .catch((error:any) => Observable.throw(error|| 'Server error')); } 

Answer 2

以下のコードは私のためにうまく働いてみます。

• テーマ変数

  _docdata：BehaviorSubject =新しいBehaviorSubject（[]）。 docdata：Observable = this._docdata.asObservable（）; {> DetailSection []）=

  のgetData（）/リフレッシュ（）{ .subscribe（（データ .MAP（RES => res.json（））this.http.get（this.url）を返しますconsole.error（ "fetch：ERROR"、err）、 （）=> console.log（ "console.error"、 "console.log（this._docdata）フェッチ：常に "））;}

• のような構成要素に応答フェッチ：

  this.detailService.getPageData（キー、srcFrom）。 this.detailService.docdata.subscribe（（dataList）=> {this.dataList = dataList; console.log（ "コンポーネントからのデータリスト"、this.dataList）;}）;