Observable mit Objekt Angular2

Question

Am Anfang möchte ich mich für mein schlechtes Englisch entschuldigen. Wir bauen den Rest meines Dienstes. Auf der Clientseite unterstützt es angular2. Ich bin ein Anfänger in dieser Technologie. Ich lese, dass es besser ist, Observable zu verwenden, anstatt zu versprechen. Ich möchte ein einzelnes Objekt mit Benutzerdaten erhalten, und leider gibt die Konsole einen Fehler zurück: "Kann Eigenschaft nicht lesen von undefined". Die Dokumentation Eckiges Beispiel verwendet ein Array und nicht ein einzelnes Objekt. Wenn ich das Array verwende, gibt es keinen Fehler, aber ich muss ein einzelnes Objekt herunterladen. Meine Frage ist, ob Observable Objekt und Showobjekt in Vorlage bekommt.

** Service **

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

** ** Komponente

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

Modell

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

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

Answer 1

Ich habe nicht Ihr genaues Problem, aber ich würde ändere dies:

Answer 2

Sie könnten die() vollständige Funktionalität hier verwenden und in Ihrer Vorlage überprüfen, ob der Beobachter den Vorgang abgeschlossen hat.

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

fand ich eine Lösung. In der Zukunft, wenn jemand nach

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