可用對象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; 
}

來源

2016-09-21 Andrew Pakula

我不明白你確切的問題，但我會改變這個：

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

來源

2016-09-21 11:30:36 mxii

至於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>

來源

2016-09-21 11:34:06 cptnk

它不能解決問題。錯誤消失了，但這些值不是從服務中獲得的。該變量未設置爲true。這個想法是通過可觀察來檢索對象的值。文檔角度，例如Observable只從表中獲取數據，沒有關於對象的信息。這就是爲什麼我想知道是否可以完成 –

對於這個錯誤我很抱歉，我的意思不是在桌子上，而是這個陣列。您需要獲取單個對象的屬性，而不是數組 –

我假設您無法從服務本身獲取數據。 – cptnk

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

<p>Change yours personal data</p> 

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

來源

2016-09-21 12:28:20

我找到了解決辦法。在未來，如果有人在尋找

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

來源

2016-09-21 16:47:05

可用對象Angular2觀察

回答

相關問題