可观察对象 Angular2

Question

一开始我想为我糟糕的英语道歉。我们建立了我的工作休息服务。在客户端，它支持 angular2。我是这项技术的初学者。我读到最好使用 Observable，而不是 Promise。我想获得一个带有用户数据的对象，不幸的是控制台返回错误“无法读取未定义的属性...”。文档 Angular 示例使用数组而不是单个对象。当我使用数组时，没有错误，但我需要下载单个对象。我的问题是，是否是通过 Observable 获取对象并在模板中显示对象？

** 服务**

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

我找到了解决方案。将来，如果有人在寻找

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

Answer 2

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

<p>Change yours personal data</p>

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

Answer 3

您可以在此处使用 () 完成功能，并在您的模板中检查观察者是否完成。

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

我不明白你的确切问题，但我会改变这个：

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