2016-05-01 83 views
7

可觀察是無法assigend,我的package.json文件保存型號「可觀察<{}> 」是不能分配給輸入角2

"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" 

問題發生,而我的終端開始編譯它顯示我的errormessage的

消息:

'\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 \'{}\'.' }

在我的服務組件

this.loggedUser $無法在構造函數中初始化的新的觀察到的,它打破了 整件事。

這是我的服務組件

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) 
    ); 
    } 


} 

在我的界面我有

export interface User { 
    id?: number,  
    name?: string, 
    email?:string, 
    email2?: string, 
    password?: string, 
    mobile?: string, 
    profilePicture?:string, 
    userTimeZone?: string 
} 

如果我把在構造一類像

this.loggedUser$ = new Observable<User[]>(observer => this.loggedUserObserver = observer).share(); 

話,就說明我不一樣的錯誤在應用程序組件上,錯誤不會在終端上進入控制檯,它是 例外:類型錯誤:_this.loggedUserObserver未定義

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(); 
    } 
} 
+0

不應該在構造函數中爲您的新Observable類型?我認爲錯誤信息指出了你。 – majodi

+0

我試過這個,但它驅使我到一個新的錯誤,在我的應用程序組件我有[代碼]這個導出類AppComponent { loggedUser:Observable <{}>; loggedUserInfo:User; 構造(私人_userService:UserService){ } ngOnInit(){ this.loggedUser = this._userService.loggedUser $; this._userService.getLoggedUser(); } } [/ code]現在它告訴我loggingUserObserver沒有定義 –

+0

請看我更新的問題,你的解決方案從終端接收錯誤,但在控制檯上拋出一個異常。 –

回答

9

搜查了很多,從#majodi的意見也有幫助。 在service.ts我已經初始化我的變量這樣

loggedUser$: Observable<User[]>; 
loggedUserObserver: Observer<User[]>; 
loggedUserInfo:User[]; 

,並在服務構造

constructor(private _http: Http) { 
    this.loggedUser$ = new Observable<User[]>(
     observer => { 
     this.loggedUserObserver = observer; 
    } 
    ).share(); 
} 

,並在app.component.ts文件我已經打電話給我觀察到這樣

ngOnInit(){  
    this._userService.loggedUser$.subscribe(latestData => { 
     this.loggedUserInfo1 = latestData; 

    });  
    this._userService.getLoggedUser(); 
} 

這些解決了這個問題。

相關問題