角度服務從組件內部可觀察更新

我有一個問題，我有一個BehaviourSubject定義在一個單獨的服務，正在被3個組件共享。我的app.ts組件從API調用獲取數組數據，然後使用服務中的next（）更新BehaviourSubject。

我遇到的問題是，當我訂閱組件A中的服務時，將數據複製到本地空數組中，然後將項目推送到該數組中，組件B正在將其項目追加到數組中paymentdataservice.ts，我不想（我只想'主列表'）。

我明顯做錯了事，也許誤解了observables的概念，所以我非常感謝一些幫助，因爲這讓我難倒了！

所有功能都是從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僅需要列出主支付清單

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

自Component B A的console.log示出從成分A所附的物品，假設我首先初始化組件A，否則它只包含從初始API調用獲得的「主列表」。

來源

2017-11-18 Blair Smith

下似乎以糾正問題： this.paymentlistdata = Object.assign（[]，data.Paymethods）; 而不是： this.paymentlistdata = data.Paymethods –

人這是becouse您註冊引用變量，這意味着，當你做this.paymentlistdatalocal = data.Paymethods，你不這樣做在內存中的其他空間，嘗試this.paymentlistdatalocal = Object.create(data.Paymethods)和組件B.同一

來源

2017-11-18 04:38:53 OPulido

角度服務從組件內部可觀察更新

回答

相關問題