Currently, I am in the process of self-teaching Angular2 and realize that I need to find better resources. One issue I am facing is related to moving my data calls to a service and utilizing Reactive Subject & BehaviorSubject as recommended by a friend. While my calls are functioning properly with a mock REST service producing a data object (containing mock user data) that matches the defined type, I encounter an error when attempting to work with this data in my top-level app called App.ts. Specifically, upon trying to access or manipulate the data, I receive an [Exception: ObjectUnsubscribedError] message in the console.
Let me outline the problem starting with my top-level app:
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Observable, Subject, BehaviorSubject} from 'rxjs';
import {UserContact, UserStatus} from './types/types';
// more stuff, then...
import {UserDataService} from './services/user-data/UserDataService';
@Component({
selector: 'app',
providers: [...FORM_PROVIDERS, UserDataService],
directives: [...ROUTER_DIRECTIVES, FooterNavigation, TopNavigation, ContactsList],
pipes: [],
template: require('./app.html')
})
export class App {
constructor(public userDataService: UserDataService) {
console.log(this.userDataService.loginInUser.last());
}
ngOnInit() {
// even if I try to output here I get the same problem
}
}
Next, let's examine my UserDataService:
import {Injectable} from 'angular2/core';
import {UserStatus} from '../../types/types';
import {Subject, BehaviorSubject, Observable} from 'rxjs';
import {Http, Headers, Response} from 'angular2/http';
@Injectable()
export class UserDataService {
public loginInUser: Subject<UserStatus> = new BehaviorSubject<UserStatus>(null);
public currentUser: UserStatus;
constructor(public http:Http) {
this.loadUserStatus(); // Here I define the false user to use in my App
}
private loadUserStatus():void {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.get('/restservice/userstatus', {headers: headers}).subscribe((response:Response) => {
var userStatus: UserStatus = new UserStatus(response.json());
this.currentUser = userStatus;
this.loginInUser.next(this.currentUser);
}, (error:Response) => this.handleError, () => {
this.loginInUser.complete();
});
}
The log from
console.log(this.userDataService.loginInUser.last());_isScalar: false
completeSignal: false
destination: BehaviorSubject
dispatching: false
errorSignal: false
isUnsubscribed: false
observers: Array[0]
operator: LastOperator
source: BehaviorSubject
_hasError: false
_isScalar: false
_subscriptions: undefined
_value: UserStatus // the data does seem to be here!!!!
completeSignal: true
dispatching: false
errorSignal: false
isUnsubscribed: true
observers: undefined
value: [Exception: ObjectUnsubscribedError] // Here is the problem!!!!
I simply want my App.ts to receive the data once it becomes available, but it appears that the data is not updating. Can someone please assist me in identifying what I may be doing incorrectly? I have already spent hours on this!