コンポーネント内から角度サービスが観測可能

Question

私は角度の初心者であり、問​​題に固執しています。

私は3つのコンポーネント間で共有されているシングルトンサービス内で定義されたBehaviourSubjectを持っている問題があります。私のapp.tsコンポーネントは、API呼び出しから配列データを取得し、サービス内のnext（）を使用してBehaviourSubjectを更新します。

私が抱えている問題は、コンポーネントA内のサービスを購読すると、ローカルの空の配列にデータをコピーし、その配列にアイテムをプッシュすることです。コンポーネントBはサブスクリプション内の配列に追加されたアイテムを見ています私が欲しくないpaymentdataservice.ts（私は唯一の 'マスターリスト'が欲しい）に。

私は明らかに何か間違っていると思いますし、おそらくオブザーバブルの概念を誤解していますので、私は大変嬉しく思っています。

すべての関数はngOnInitから呼び出されます。これはコードの単純化のために除外しています。

PaymentDataService.ts：

@Injectable() 

constructor(private http: Http) { } 

private _paymentlistdata = new BehaviorSubject<any>([]); 
public readonly paymentlistdata = this._paymentlistdata.asObservable(); 

//Function to get latest Paymethodlist data and input into subject 
updatePaymentListData(data) { 
    this._paymentlistdata.next(data);  
} 

//HTTP Call for PayMethods from API 
getPayMethods() {  
     let token = localStorage.getItem('token') 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json');   
     return this.http.get('https://api.xyz.com/api/paymethods? 
     token='+token+'', {headers: headers}) 
      .map((res: Response) => res.json()) 
} 

App.ts

App.tsマスター支払リストを取得し、パフォーマンス上の目的のためのサービスで、それを格納する必要があり、それはありません。各コンポーネントのAPIから引き出す

import { PaymentDataService } from '../app/services/paymentdata.service'; 

constructor(private payservice : PaymentDataService) { } 

//Get payment data from PaymentDataService HTTP API 
getPaymentData() { 
    this.payservice.getPayMethods().subscribe( 
    data => { 
    if (data.Error === false) { 
     this.payservice.updatePaymentListData(data); //update Behaviour 
     subject so other components can use the data locally   
    } else { 
    this.router.navigate(["errorloading"]); 
    console.log (data); 
    } 
}, 
error => { 
    this.router.navigate(["errorloading"]); 
    console.log (error); 
}); 

成分A

成分Aは、マスター支払一覧を取得し、ドロップダウンメニューのためのいくつかの追加オプションを追加する必要があります。これらのオプションは、このコンポーネントでのみ適用されます。

import { PaymentDataService } from '../app/services/paymentdata.service'; 

constructor(private payservice : PaymentDataService) { } 

paymentlistdatalocal = []; 

//Populate paymentlist from service observable 
getPaymentListData() { 
    this.paymentlistsubscription = this._payservice.paymentlistdata 
    .subscribe(
    data => { 
     this.paymentlistdatalocal = data.Paymethods; 
     this.paymentlistdatalocal.push({paymethod_id:0, paymethod_name: 'No 
     payment method selected'}); 
    }); 
} 

成分B

成分Bは、単にIを想定し、成分Bからはconsole.logは成分Aから、添付のアイテムを示すマスター支払リスト

import { PaymentDataService } from '../app/services/paymentdata.service'; 

constructor(private payservice : PaymentDataService) { } 

paymentlistdatalocal = []; 

//Populate paymentlist from service observable 
getPaymentListData() { 
    this.paymentlistsubscription = this._payservice.paymentlistdata 
    .subscribe(
    data => { 
     this.paymentlistdatalocal = data.Paymethods; 
     console.log (data.Paymethods); 
    }); 
} 

をリストする必要が

最初にコンポーネントAを初期化します。それ以外の場合は、最初のAPI呼び出しから取得した「マスターリスト」のみが含まれます。

Answer 1

男性あなたが参照によって変数を割り当てるbecouseこれは、それはあなたが、あなたがメモリ内の他のスペースをthis.paymentlistdatalocal = data.Paymethodsやっていないんとき、意味、