Наблюдаемый объект Angular2

Question

В начале я хочу извиниться за свой бедный английский. Мы строим службу моей службы отдыха. На стороне клиента он поддерживает угловое2. Я новичок в этой технологии. Я читал, что лучше использовать Observable вместо обещания. Я хочу получить один объект с пользовательскими данными, и, к сожалению, консоль возвращает ошибку «Невозможно прочитать свойство ... неопределенного». В документе «Угловой пример» используется массив, а не один объект. Когда я использую массив, нет ошибки, но мне нужно загрузить один объект. Мой вопрос заключается в том, является ли объект Observable get object и show object в шаблоне?

** сервис **

import { Injectable } from "@angular/core"; 
import { AppParameters } from "../parameters"; 
import { AuthHttp } from "angular2-jwt"; 
import { AuthService } from "./auth.service"; 
import { Response } from "@angular/http"; 
import { Observable } from 'rxjs/Observable'; 
import { UsersModel } from "../../models/models"; 
import { GroupModel } from "../../models/models"; 

@Injectable() 

export class ProfileService { 

    private userUrl: string = AppParameters.ENDPOINT_URL + "/users"; 
    private groupUrl: string = AppParameters.ENDPOINT_URL + '/groups'; 
    private wallUrl: string = AppParameters.ENDPOINT_URL + "/posts/"; 


    constructor(
     private authHttp: AuthHttp, 
     private authService: AuthService 
    ){} 

    getUsers(id) : Observable<UsersModel> { 
      return this.authHttp.get(this.userUrl + '/' + id + '/') 
       .map(this.extractData) 
       .catch(this.handleError) 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     return body.data || { }; 
    } 

    private handleError (error: any) { 
     let errMsg = (error.message) ? error.message : 
      error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
     console.error(errMsg); 
     return Observable.throw(errMsg); 
    } 
} 

** компонент **

import { Component, OnInit } from "@angular/core"; 
import { AppParameters } from "../../shared/parameters"; 
import { ProfileConfig } from "./profile.config"; 
import { UsersModel } from "../../models/models"; 
import { ProfileService } from "../../shared/services/profile.service"; 
import { ActivatedRoute } from "@angular/router"; 


@Component({ 
    templateUrl: AppParameters.TEMPLATE_URL + ProfileConfig.COMPONENT_NAME + '/user.html', 
    providers: [ ProfileService ] 
}) 

export class UserComponent implements OnInit { 

    user : number; 
    data: UsersModel; 
    errorMessage: string; 

    constructor(
     private profileService: ProfileService, 
     private route: ActivatedRoute, 
    ){} 

    ngOnInit() { 
     this.getUser(); 
     this.getData(); 
    } 

    getUser() { 
     this.route.params 
      .subscribe(params => { 
       this.user =+ params['id']; 
      }); 
    } 

    getData() { 
     this.profileService.getUsers(this.user) 
      .subscribe(
       data => this.data = data, 
       error => this.errorMessage = <any>error 
      ); 
    } 
} 

модель

export class UsersModel { 
    id: number; 
    username: string; 
    email: string; 
    user_profile: UserProfileModel; 
} 

class UserProfileModel { 
    city: string; 
    status: string; 
    about: string; 
} 

Answer 1

Я не получить точную проблему, но я бы изменить это:

ngOnInit() { 
    this.route.params 
     .subscribe(params => { 
      // route parameter changed.. lets get new data ! 
      this.user =+ params['id']; 
      this.getData(); // do it here, cause NOW you have that id.. 
     }); 
} 

Answer 2

Вы можете использовать() полную функциональность здесь и проверить внутри своего шаблона, если наблюдатель завершил.

// component 
observer.subscribe(
    value => this.obj = value, 
    (errData) => { this.renderErrors() }, 
    () => { 
     this.variableFilledWhenDone = true; 
    } 
); 

<!-- template --> 
<div *ngIf="ariableFilledWhenDone"> 
     <!-- stuff that needs to happen async --> 
    <div> 

Answer 3

<h3>Hello {{ data.username }}</h3> 

<p>Change yours personal data</p> 

<set-user-data [data] = 'data'></set-user-data> 

Answer 4

Я нашел решение. В будущем, если кто-то искал

private extractData(res: Response) { 
    let body = <UsersModel>res.json(); 
    return body || { }; 
}