Javascript Angular以[Object Object]的形式从API调用返回数据，但在组件中未定义

我正在做一个项目，遇到了一个巨大的障碍点

正如我在问题中提到的，我已经构建了一个dataService，但是我的dataService正确地显示了响应，但是在我的组件中它是未定义的

这是我的data.service.ts文件代码

import { Injectable, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {
  Http,
  Response,
  Request,
  RequestOptions,
  Headers
} from '@angular/http';


import {Observable} from 'rxjs/Observable';
import { Institution } from './institution';
import 'rxjs/Rx';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

@Injectable()
export class DataService {
  constructor(private http: HttpClient) { }
    institutionData: Object;
    //private http: Http;


 grabInstitutionData(): Observable<Institution[]> {
    return this.http
      .get(`http://127.0.0.1:8000/courses/api/institution/list/`)
      .map((response: Response) => {
        console.log(response);
        this.institutionData = <Institution[]>response.json();
        console.log('this is right' + this.institutionData);
        return this.institutionData;
      })
      .catch(this.handleError);
  }

private handleError(error: Response) {
  return Observable.throw(error.statusText);
}

}

我知道它与异步函数调用有关，但我不能确切地知道它是什么

---

任何帮助都将不胜感激。

El Teezus，不要使用map，也不要使用json。当我们使用map来转换响应时，它在代码中没有意义

//为我们服务

grabInstitutionData(): Observable<Institution[]> {
    return this.http
      .get(`http://127.0.0.1:8000/courses/api/institution/list/`)
      .do(response:Response)=>{
        console.log(response);
        this.institutionData = <Institution[]>response;
        console.log('this is right' + this.institutionData);
       }) 
      .catch(this.handleError);
  }

---

哪一行代码显示了未定义的值？任何输出和/或测试套件都将在组件函数的第28行error=>console.logError:：+error显示了控制台中的错误。数据也未定义。这个问题已经得到了回答，但我非常感谢您的反馈，并将在下次我有问题时包括这一点。它很有效！非常感谢你。我在这里花了好几个小时追尾。我想下一次我会查看文档，看看HTTP的调用是什么。就这么做了！我不知道怎么做。很好地指出了这一点。

grabInstitutionData(): Observable<Institution[]> {
    return this.http
      .get(`http://127.0.0.1:8000/courses/api/institution/list/`)
      .do(response:Response)=>{
        console.log(response);
        this.institutionData = <Institution[]>response;
        console.log('this is right' + this.institutionData);
       }) 
      .catch(this.handleError);
  }

getInstitutions(): void {
    this.dataService.grabInstitutionData()
      .subscribe(
        (resultArray) => 
         {
           this._InstitutionsArray = resultArray
           //here you have the data
           console.log(this._Institutionsrray);
         },
        (error) => console.log("Error :: " + error)
      );
  }