用对象Angular2观察
发布时间:2020-12-17 17:07:56 所属栏目:安全 来源:网络整理
导读:一开始我想为我可怜的英语道歉.我们建立了我的工作休息服务.在客户端,它支持angular2.我是这项技术的初学者.我读到最好使用Observable而不是promise.我想获得一个包含用户数据的对象,不幸的是,控制台返回错误“无法读取属性…未定义”.文档Angular示例使用数
一开始我想为我可怜的英语道歉.我们建立了我的工作休息服务.在客户端,它支持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; } 解决方法
您可以在此处使用()完整功能,并在观察者完成时检查您的模板.
// component observer.subscribe( value => this.obj = value,(errData) => { this.renderErrors() },() => { this.variableFilledWhenDone = true; } ); <!-- template --> <div *ngIf="ariableFilledWhenDone"> <!-- stuff that needs to happen async --> <div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容