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

你究竟在哪里得到'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); 
}

extractData方法是在service.ts文件内部准确显示数据，但问题出在component.ts文件数据未定义。你可以看看组件代码，并告诉在订阅功能中做错了什么。 –

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

答

这可能是因为你试图访问你的allocatedAssetsLists之前的数据是实际上从服务中返回。

如果你在你的模板访问它，你可以用一个简单的ngIf，以确保你只尝试一次的数据可用来显示它。

如果不是这样，我们需要更多关于您的问题的信息来提供帮助。

嗨，正是我也假设也是因为我的日志里面的组件文件首先打印比服务文件日志。但这是我不知道如何处理这个异步问题，我认为订阅会为我做。但现在米stucked –

我也有这个相同的问题。没有人表示代码是否错误（我的代码就像问题所做的那样）。我知道你可以在你的html中使用elvis操作符（？），但是当你需要处理打字稿文件中的数据时呢？ –

Angular2 HTTP使用observables订阅显示数据undefined

相关推荐