Why i cant assign and use the value inside a component?

Question

I have a service to share the variables among the components as follows,

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class AppMessageQueuService {    
    checkOutPageParams: Subject<Object>;
    constructor() {     
        this.checkOutPageParams = new Subject<string>();

    }

}

I use this service to pass the following parameters to another component,

  this.appMsgService.checkOutPageParams.next({
            'userId': listItem.userInfo.userId,
            'listingId': listItem.listingId,
            'event': this.event
        });

I can see the values being assigned to event when i debug, this is how i get the values in the 2nd component,

 this.appMsgService.checkOutPageParams.asObservable()
            .switchMap((params: Object) => {
                let userId = params['userId'];
                let listingId = params['listingId'];
                this.event = params['event'];
                return this.checkOutInforService.getCheckoutDetails(userId, listingId);
            }).subscribe((checkoutDetail: CheckoutUserDetail) => {
                this.checkoutInfoDetails = checkoutDetail;
            });
            console.log(this.event) //this returns undefined

I can see the value being assigned to event as well. but when i print a console.log(this.event) after the above lines, it says undefiend.

What is the issue. how can i assign the value to the event and use it within the component 2.

No you can't. Observables are asynchronous, so console.log executes before this.event is assigned. Move the statement inside your `subscribe` block. — Michael Kang, Mar 02 '17 at 05:08
where are you trying to use `params` when the error occurs (post code)? — Michael Kang, Mar 02 '17 at 05:10
@pixelbits i cant access params and assign this.event = params['event']; inside the subscribe method — Sajeetharan, Mar 02 '17 at 05:15
You've already assigned it in your `switchMap` - just use it. — Michael Kang, Mar 02 '17 at 05:16
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — eko, Mar 02 '17 at 05:31

Michael Kang · Accepted Answer · 2017-03-02T05:39:49.573

2

I'm not sure if this is the best way, but you could try:

import 'rxjs/add/observable/forkJoin'


this.appMsgService.checkOutPageParams.asObservable()
            .switchMap((params: Object) => {
                return Observable.forkJoin ([
                  this.checkOutInforService.getCheckoutDetails(userId, listingId),
                  Observable.of(params)])
            }).subscribe((result) => {
                this.checkoutInfoDetails = result[0] as CheckoutUserDetail;
                this.params = result[1];
                ... do with params as you wish ...
            });

edited Mar 02 '17 at 05:39

answered Mar 02 '17 at 05:28

Michael Kang

52,003
16
103
135

Observable.forkJoin is not a function – Sajeetharan Mar 02 '17 at 05:38
You have to import the operator – Michael Kang Mar 02 '17 at 05:39
it works, but when i bind in the ui i cannot see the data, any idea?
{{event}}
– Sajeetharan Mar 02 '17 at 05:48
cant i directly bind these variables to the ui elements? – Sajeetharan Mar 02 '17 at 05:51
http://stackoverflow.com/questions/42547992/why-the-data-binded-does-not-show-here – Sajeetharan Mar 02 '17 at 06:07

Why i cant assign and use the value inside a component?

1 Answers1