Observablesを使用したHTTP Observableを使用したHTTPサブスクリプションのデータが表示されていません

Question

私は間違っていますが、何とか私はデータを読み取ることができません。私はコンソールを入れているが、コンポーネント内のsubscribe関数では、私に定義されていないサービスextractDataメソッド。私が間違ってやっていることを助けてください、私はこれが非同期の問題だと推測していますが、私はどのように正しいのか分かりません。 何か助けになるでしょう。事前に ありがとう

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を使用して、データが利用可能になったら表示するようにしてください。

これがそうでない場合は、問題の詳細についてはヘルプが必要です。