使用observables订阅的Angular2 HTTP显示数据未定义
发布时间:2020-12-17 06:48:44 所属栏目:安全 来源:网络整理
导读:我不知道我做错了什么,但不知怎的,我无法读取数据,虽然数据来自服务器的响应,甚至当我放置控制台时数据也显示在服务extractData方法内在组件内部订阅功能,它给我未定义.帮助我,我做错了什么,我假设这是异步的问题,但我不知道它是多么正确. 任何帮助都会很明
我不知道我做错了什么,但不知怎的,我无法读取数据,虽然数据来自服务器的响应,甚至当我放置控制台时数据也显示在服务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); } } 解决方法listByEmpId(empId:string){ this.adminService.getAllocatedAssets(empId).subscribe( res => { this.allocatedAssetsList = res; console.log(this.allocatedAssetsList); },error => this.errorMessage = <any>error); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |