Question

我是一个角色新手，我遇到了问题。

我有一个问题，我在单个服务中定义了一个BehaviourSubject，它在3个组件之间共享。我的app.ts组件从API调用获取数组数据，然后使用服务中的next（）更新BehaviourSubject。

我遇到的问题是，当我订阅组件A中的服务时，将数据复制到本地空数组，然后将项目推送到该数组中，组件B看到其中附加到数组的项目＆＃39 ;订阅paymentdataservice.ts，我不想要（我只想要＆＃39;主列表＆＃39;）。

我显然做错了，也许误解了可观察的概念，所以我非常感谢一些帮助，因为这让我感到难过！

所有函数都是从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);
    });
}

来自组件B的console.log显示组件A附加的项目，假设我首先初始化组件A，否则它只包含＆＃39;主列表＆＃39;从最初的API调用中获得。

Answer 1

男士这是因为你是通过引用分配变量，这意味着，当你this.paymentlistdatalocal = data.Paymethods执行时，你没有在内存中做其他空间，请尝试this.paymentlistdatalocal = Object.create(data.Paymethods)并在组件B。

角度服务可观察到组件内的更新

1 个答案: