Type \'Observable<{}>\' is not assignable to type in angular 2

15,800

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.

Share:
15,800
MD ABDULLAH AL KAFI
Author by

MD ABDULLAH AL KAFI

Updated on July 25, 2022

Comments

  • MD ABDULLAH AL KAFI
    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();
        }
    }