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

** component **

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

- Andrew Pakula

Answer 1

你可以在这里使用()完成功能，并在模板中检查观察者是否已完成。

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

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

- cptnk

---

它并没有解决问题。错误已经消失，但是值没有从服务中获取。变量没有设置为true。想法是通过observable检索对象的值。例如，Angular文档中，Observable仅从表中获取数据，没有关于对象的内容。这就是为什么我想知道是否可以实现。 - Andrew Pakula

对于我的错误表示歉意，我指的不是表格，而是这个数组。您需要获取单个对象的属性，而不是使用数组。 - Andrew Pakula

我会假设您在从服务本身获取数据方面遇到了麻烦。 - cptnk

Answer 2

我不太明白你的具体问题，但是我会将这个代码改成这样：

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

- slaesh

---

关于获取属性的方式并不是通过表格，而是使用 Observable 对象来实现。 - Andrew Pakula

什么表格？请澄清您的问题...我现在无法理解您的实际问题...您在哪个阶段收到该错误消息？请发布完整的错误消息... - slaesh

哎呀，抱歉犯了个错误。Angular文档中获取数据是从模型数组中获取的，而我需要从对象中获取。 - Andrew Pakula

请展示一下你的模板，其中使用了 data: UserModel。 - slaesh

Answer 3

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

<p>Change yours personal data</p>

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

- Andrew Pakula

Answer 4

我找到了一个解决方案。将来如果有人在寻找，可以参考。

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

- Andrew Pakula