在angular2应用程序中获取服务调用后的未定义值

时间:2017-08-08 12:59:17

标签: angular angular2-services

我有一个服务,它返回一个具有指定类类型的observable,它向我的服务器发出一个http请求并获取数据。我想使用这些数据,但我总是得到未定义的。问题是什么?

Service.ts

 @Injectable()
    export class ToDoListClient {
    private http: Http;
    private baseUrl: string;
    protected jsonParseReviver: (key: string, value: any) => any = undefined;

    constructor(@Inject(Http) http: Http, @Optional() @Inject(API_BASE_URL) baseUrl?: string) {
        this.http = http;
        this.baseUrl = baseUrl ? baseUrl : "";
    }

    get(): Observable<ToDoItem[]> {
        let url_ = this.baseUrl + "/api/ToDoList";
        url_ = url_.replace(/[?&]$/, "");

        let options_ = {
            method: "get",
            headers: new Headers({
                "Content-Type": "application/json", 
                "Accept": "application/json"
            })
        };

        return this.http.request(url_, options_).flatMap((response_) => {
            return this.processGet(response_);
        }).catch((response_: any) => {
            if (response_ instanceof Response) {
                try {
                    return this.processGet(response_);
                } catch (e) {
                    return <Observable<ToDoItem[]>><any>Observable.throw(e);
                }
            } else
                return <Observable<ToDoItem[]>><any>Observable.throw(response_);
        });
    }

    protected processGet(response: Response): Observable<ToDoItem[]> {
        const status = response.status; 

        if (status === 200) {
            const _responseText = response.text();
            let result200: ToDoItem[] = null;
            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
            if (resultData200 && resultData200.constructor === Array) {
                result200 = [];
                for (let item of resultData200)
                    result200.push(ToDoItem.fromJS(item));
            }
            return Observable.of(result200);
        } else if (status !== 200 && status !== 204) {
            const _responseText = response.text();
            return throwException("An unexpected server error occurred.", status, _responseText);
        }
        return Observable.of<ToDoItem[]>(<any>null);
     }

    }

Component.ts

public toDoItems: ToDoItem[];
 ngOnInit() {
    console.log('TodoComponent');
    this.populate();
}
/* get ToDoItems */
populate() {

//let config = { headers: { Authorization: 'Bearer ' + this.msalService.access_token } };
this.toDoListClient.get().subscribe(
    (response) =>  {
        this.toDoItems = response;
         console.log(this.toDoItems); ---> here printing the undefined values.
     },function (err: any) {
    this.error = err;       
      });
   };

控制台输出:

enter image description here

当我尝试从服务器获取数据列表时,上面的代码无法正常工作。它只返回来自服务器的记录数,其中包含未定义的字段值,如上图所示。

0 个答案:

没有答案