一开始我想为我糟糕的英语道歉。我们建立了我的工作休息服务。在客户端它支持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;
}
最佳答案
您可以在此处使用 () complete 功能,并在您的模板中检查观察者是否已完成。
// component
observer.subscribe(
value => this.obj = value,
(errData) => { this.renderErrors() },
() => {
this.variableFilledWhenDone = true;
}
);
<!-- template -->
<div *ngIf="ariableFilledWhenDone">
<!-- stuff that needs to happen async -->
<div>
关于angular - 可通过对象 Angular2 观察,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39615262/