Angular2 HTTP使用observables訂閱顯示數據undefined

我不知道我在做什麼錯，但不知何故，我無法讀取數據，雖然數據來自服務器的響應，甚至數據顯示內服務extractData方法，當我把控制檯，但在組件裏面的訂閱功能，它給我未定義。幫助我做錯了什麼，我假設這是異步問題，但我不知道它有多正確。任何幫助將是可觀的。 Thanx提前Angular2 HTTP使用observables訂閱顯示數據undefined

Component.ts

import { Component, Input, OnInit } from '@angular/core'; 
import {AdminService} from './admin.service'; 
import {logistics} from '../shared/model/logistics'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 
import 'rxjs/add/operator/switchMap'; 
import 'rxjs/add/operator/toPromise'; 
import { Observable }  from 'rxjs/Observable'; 
import {Response } from '@angular/http'; 
@Component({ 
    moduleId:module.id, 
    selector: 'admin', 
    templateUrl: 'admin.component.html', 
    styleUrls:['admin.component.css'], 
    providers:[AdminService] 
}) 

export class AdminComponent implements OnInit{ 
    @Input() public allocatedAssetsList: logistics[]; 


    mode = 'Observable'; 
    public errorMsg = ''; 
    constructor(private adminService: AdminService) { 

    } 

    ngOnInit(){ 
     this.listByEmpId("123"); 

    } 

    listByEmpId(empId:string){ 

     this.adminService.getAllocatedAssets(empId).subscribe(
     res => this.allocatedAssetsList = res, 
     error => this.errorMessage = <any>error); 
    } 
}

Service.ts

import { Injectable }  from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Hero }   from './hero'; 
import { Observable }  from 'rxjs/Observable'; 
import { Headers, RequestOptions } from '@angular/http'; 
import {logistics} from '../shared/model/logistics'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 
import 'rxjs/add/operator/switchMap'; 
import 'rxjs/add/operator/toPromise'; 


@Injectable() 
export class AdminService { 
    constructor (private http: Http) {} 
    private listAssetsURL = '/api/logistics/list/'; // URL to web API 

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

    private handleError (error: any) { 
     // In a real world app, we might use a remote logging infrastructure 
     // We'd also dig deeper into the error to get a better message 
     let errMsg = (error.message) ? error.message : 
      error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
     console.error(errMsg); // log to console instead 
     return Observable.throw(errMsg); 
    } 

    getAllocatedAssets (empId: string): Observable<logistics[]> { 

     this.listAssetsURL+= empId; 
     //let body = JSON.stringify({ empId }); 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     return this.http.get(this.listAssetsURL) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 
}

來源

2016-08-04 Sumit Khanduri

你究竟在哪裏得到'undefined'？ –

@GünterZöchbauer 下面是component.ts文件中的函數，我添加了日誌行，它顯示未定義。 'listByEmpId（EMPID：串）{ this.adminService.getAllocatedAssets（EMPID）.subscribe（ RES => this.allocatedAssetsList = RES，誤差=> this.errorMessage = 錯誤）; console.log（JSON.stringify（this.allocatedAssetsList））; }' –

您可以添加一個'console.log（...）'在哪裏以及如何檢查？ –

listByEmpId(empId:string){ 

    this.adminService.getAllocatedAssets(empId).subscribe(
    res => { 
     this.allocatedAssetsList = res; 
     console.log(this.allocatedAssetsList); 
    }, 
    error => this.errorMessage = <any>error); 
}

來源

2016-08-04 07:52:21

extractData方法是在service.ts文件內部準確顯示數據，但問題出在component.ts文件數據未定義。你可以看看組件代碼，並告訴在訂閱功能中做錯了什麼。 –

Thanx老兄，工作phew ...很高興... –

這可能是因爲你試圖訪問你的allocatedAssetsLists之前的數據是實際上從服務中返回。

如果你在你的模板訪問它，你可以用一個簡單的ngIf，以確保你只嘗試一次的數據可用來顯示它。

如果不是這樣，我們需要更多關於您的問題的信息來提供幫助。

來源

2016-08-04 08:15:05 TommyF

嗨，正是我也假設也是因爲我的日誌裏面的組件文件首先打印比服務文件日誌。但這是我不知道如何處理這個異步問題，我認爲訂閱會爲我做。但現在米stucked –

我也有這個相同的問題。沒有人表示代碼是否錯誤（我的代碼就像問題所做的那樣）。我知道你可以在你的html中使用elvis操作符（？），但是當你需要處理打字稿文件中的數據時呢？ –

Angular2 HTTP使用observables訂閱顯示數據undefined

回答

相關問題