Porównaj ceny domen i usług IT, sprzedawców z całego świata

Angular2 HTTP używający obserwabli subskrybuje wyświetlanie danych niezdefiniowanych


Nie wiem, co robię źle, ale jakoś nie mogę odczytać danych, chociaż dane pochodzą z serwera w odpowiedzi i nawet dane są wyświetlane w metodzie usługi extractData, gdy umieszczam konsolę, ale w komponencie wewnątrz funkcja subskrypcji daje mi nieokreśloną wartość. Pomóż mi, co robię źle, domyślam się, że jest to problem asynchroniczny, ale nie mam pojęcia, jak to naprawić.
Każda pomoc byłaby namacalna.
z góry dziękuję

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

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

listByEmpId(empId:string){ this.adminService.getAllocatedAssets(empId).subscribe( res => {
this.allocatedAssetsList = res;
console.log(this.allocatedAssetsList);
},
error => this.errorMessage = <any>error);
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Dzieje się tak prawdopodobnie dlatego, że próbujesz uzyskać dostęp do przydzielonychListAssetsLists, zanim dane zostaną faktycznie zwrócone z usługi.
Jeśli odnosisz się do niego w swoim szablonie, możesz użyć prostego
ngIf
, aby upewnić się, że spróbujesz wyświetlić go dopiero po udostępnieniu danych.
Jeśli nie, potrzebujemy więcej informacji o Twoim problemie, aby pomóc.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się