Angular2 HTTP using obsables subscribe Показывать данные undefined

Question

Я не знаю, что я делаю неправильно, но почему-то я не умею читать данные, хотя данные поступают с сервера в ответ, и даже данные отображаются внутри service extractData, когда я помещаю консоль, но в компоненте внутри функции подписки, она дает мне неопределенный. Помогите мне, что я делаю неправильно, я предполагаю, что это проблема асинхронизации, но я понятия не имею, насколько это правильно. Любая помощь будет заметна. Thanx заранее

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

Answer 1

listByEmpId(empId:string){ 

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

Answer 2

Это, вероятно, потому, что вы пытаетесь получить доступ к allocatedAssetsLists до данных фактически вернулся из службы.

Если вы используете его в своем шаблоне, вы можете использовать простой ngIf, чтобы убедиться, что вы пытаетесь отобразить его только после того, как данные будут доступны.

Если это не так, нам нужна дополнительная информация о вашей проблеме, чтобы помочь.