Observable is unable to assigend, my package.json file holds
"angular2": "2.0.0-beta.17",
"systemjs": "0.19.24",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"
Problem happens while my terminal start compiling it shows me an errormessage
message:
'\u001b[31mresources/assets/typescript/services/user.service.ts(25,5): \u001b[39merror TS2322: Type \'Observable<{}>\' is not assignable to type \'Observable\'.\n Type \'{}\' is not assignable to type \'User[]\'.\n Property \'length\' is missing in type \'{}\'.' }
in my service component this.loggedUser$ is unable to initialised by new Observable inside the constructor and it breaks the whole thing.
This is my service component
import {Injectable} from 'angular2/core';
import {Http,Response,Headers} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import {User} from '../interfaces/interfaces';
export var API_ENDPOINT = 'http://localhost:8080/api';
@Injectable()
export class UserService {
loggedUser$: Observable<User[]>;
private loggedUserObserver: Observer<User[]>;
private loggedUserInfo:{
users: User[]
};
constructor(private _http: Http) {
this.loggedUser$ = new Observable(observer => this.loggedUserObserver = observer).share();
this.loggedUserInfo = { users: [] };
}
getLoggedUser(){
return this._http.get(API_ENDPOINT+'/getLoggedUser')
.map((res:Response)=>res.json())
.subscribe(
data => {
this.loggedUserInfo.users = data;
this.loggedUserObserver.next(this.loggedUserInfo.users);
},
err => console.error(err),
() => console.log(this.loggedUserInfo.users)
);
}
}
in my interface I have
export interface User {
id?: number,
name?: string,
email?:string,
email2?: string,
password?: string,
mobile?: string,
profilePicture?:string,
userTimeZone?: string
}
if i place a type in the constructor like
this.loggedUser$ = new Observable<User[]>(observer => this.loggedUserObserver = observer).share();
then it shows me a different error on the app component, the error is not coming in the terminal its coming on the console and it is EXCEPTION: TypeError: _this.loggedUserObserver is undefined
import {Component,OnInit,} from 'angular2/core';
import {Router,ROUTER_DIRECTIVES} from 'angular2/router';
import {RouteConfig, RouteData} from 'angular2/router';
import {MyProfileComponent} from './settings/my-profile.component';
import {MyCompaniesComponent} from './company/my-companies.component';
import {MyTasksComponent} from './tasks/my-tasks.component';
import {UserComponent} from './user/user.component';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
import {UserService} from './services/user.service';
import {User} from './interfaces/interfaces';
@Component({
selector: 'my-app',
//templateUrl: 'appView/front.html',
template:`{{loggedUser.name}}`,
directives:[ROUTER_DIRECTIVES, MyProfileComponent, MyCompaniesComponent,UserComponent],
providers: [UserService],
})
export class AppComponent{
loggedUser: Observable<User[]>;
loggedUserInfo:User;
constructor (private _userService: UserService){
}
ngOnInit(){
this.loggedUser = this._userService.loggedUser$;
this._userService.getLoggedUser();
}
}
Searched a lot and comments from #majodi also helped. In the service.ts i have initialised my variable like this
loggedUser$: Observable<User[]>;
loggedUserObserver: Observer<User[]>;
loggedUserInfo:User[];
and in the service constructor
constructor(private _http: Http) {
this.loggedUser$ = new Observable<User[]>(
observer => {
this.loggedUserObserver = observer;
}
).share();
}
and in the app.component.ts file i have called my observable this way
ngOnInit(){
this._userService.loggedUser$.subscribe(latestData => {
this.loggedUserInfo1 = latestData;
});
this._userService.getLoggedUser();
}
and these solved the issue.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With