Question

我正在研究一个项目，并且已经到了一个巨大的阻塞点。

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

这是我的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);
}

}

我的组件文件代码：

import { async } from '@angular/core/testing';
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import {Http, Response} from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { Institution } from '../institution';

@Component({
  selector: 'app-institutions',
  templateUrl: './institutions.component.html',
  styleUrls: ['./institutions.component.css']
})



export class InstitutionsComponent implements OnInit {
  institutionData: Object;
  _InstitutionsArray: Institution[];
  constructor(private http: Http, private dataService: DataService) { }

getInstitutions(): void {
    this.dataService.grabInstitutionData()
      .subscribe(
        resultArray => this._InstitutionsArray = resultArray,
        error => console.log("Error :: " + error)
      );
  }

  ngOnInit(): void {
    this.getInstitutions();
  }

}

我知道它与异步函数调用有关，但我无法弄清楚它会是什么。

任何和所有帮助将不胜感激。

Answer 1

El-Teezus，不使用地图而不使用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);
  }

看到我们使用“do”与响应做“某事”而不改变它。是的，“do”是检查respone是否是预期的响应或无论如何缓存结果。另见我们不需要写response.json（）。 HttpClient为我们做好准备。

在您的组件中

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

Angular将来自API调用的数据作为[Object Object]返回，但在组件中未定义

1 个答案: