可用对象Angular2观察

问题描述：

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

** **服务

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

答

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

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

至于get属性不是来自表格，而是使用Observable对象。 –

什么表？请澄清你的问题..不要立即得到你的实际问题..在哪一点你得到这个错误信息？发布完整的错误信息请。 – mxii

Eh。对不起，这个错误。文档Angular数据从模型数组中获取，我需要从对象中获取它们。 –

答

您可以在这里使用（）完整的功能，并在观察者完成后检查您的模板。

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

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

它不能解决问题。错误消失了，但这些值不是从服务中获得的。该变量未设置为true。这个想法是通过可观察来检索对象的值。文档角度，例如Observable只从表中获取数据，没有关于对象的信息。这就是为什么我想知道是否可以完成 –

对于这个错误我很抱歉，我的意思不是在桌子上，而是这个阵列。您需要获取单个对象的属性，而不是数组 –

我假设您无法从服务本身获取数据。 – cptnk

答

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

<p>Change yours personal data</p> 

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

答

我找到了解决办法。在未来，如果有人在寻找

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

可用对象Angular2观察

相关推荐