Type \'Observable<{}>\' is not assignable to type in angular 2
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.
MD ABDULLAH AL KAFI
Updated on July 25, 2022Comments
-
MD ABDULLAH AL KAFI over 1 year
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(); } }