Angular 角度http.get无法获取数据

我有一个简单的Rails5API，我正在尝试从我的Angular应用程序中的API获取数据

首先，如果我访问：我会得到以下结果：

[{id:2，标题：蝙蝠侠，创建人：1，创建时间：2017-06-17T07:19:35.000Z，更新时间：2017-06-17T07:19:35.000Z}]

因此，轨道侧工作

在我的app.component.ts中，我导入：

import { AppService }         from "./app.service";
import { Movie }              from './movie';

电影公司

export class Movie{
  id: number;
  title: string;
}

app.service.ts

从“@angular/core”导入{Injectable}； 从'@angular/Http'导入{Http，Response}

import { Observable }           from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import { Movie }                from './movie';

@Injectable()
export class AppService{

  private moviesUrl = 'http://localhost:3000/movies';

  constructor(private http: Http){

  }

  getMovies(): Observable<Movie[]>{
    return this.http.get(this.moviesUrl)
      .map(this.extractData)
      .catch(this.handleError);
  }

  private extractData(res: Response){
    let body = res.json();
    return body.data || {};
  }

  private handleError (error: Response | any) {
    // In a real world app, you might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

}

当我访问http://localhost:3000/movies 在我的浏览器中，我在Puma日志中获得以下内容：

2017年6月17日10:35:00+0200开始拍摄127.0.0.1版的电影 MoviesControllerindex以HTML格式处理 电影加载1.0ms从电影中选择电影。* 在6ms视图中完成200 OK：4.0ms |活动记录：1.0ms

当我访问我的角度应用程序是我得到的

2017年6月17日10:37:59+0200开始拍摄127.0.0.1版的电影 MoviesControllerindex以HTML格式处理 电影加载0.5毫秒从电影中选择电影。* 在4ms视图中完成200 OK：2.8ms |活动记录：0.5ms

因此Angular应用程序向API发出请求，API返回结果，但该结果不会显示在Angular组件中。

在Angular中，我们使用Observable（从rxjs/Observable导入）来处理异步代码

请注意，当您调用this.appService.getMovies（返回一个可观察对象）时，这本质上是一个异步操作。在AppComponent中，您订阅它并异步获取值

请注意AppComponent代码-

希望这有帮助

额外的

更多关于可观测数据的阅读

在Angular中，我们使用从rxjs/Observable导入的Observable来处理异步代码

请注意，当您调用this.appService.getMovies（返回一个可观察对象）时，这本质上是一个异步操作。在AppComponent中，您订阅它并异步获取值

请注意AppComponent代码-

希望这有帮助

额外的

更多关于可观测数据的阅读

---

你在ngOnInit中调用的console.logthis.movies中没有得到任何数据，对吗？可能是@Abrar correct的重复。因此，是的，可能http.get确实接收数据，但不首先执行this.getMovies函数，当该函数完成时，ngOnInit中的console.log？console.log方法将独立于http请求是否完成而执行。您应该在subscribe方法内部的success中移动它case@PeterBoomsma，看看我下面给出的答案。你在console.logthis.movies中没有得到任何数据，对吗？可能是@Abrar correct的副本。因此，是的，可能http.get确实接收数据，但不首先执行this.getMovies函数，当该函数完成时，ngOnInit中的console.log？console.log方法将独立于http请求是否完成而执行。您应该在subscribe方法内部的success中移动它case@PeterBoomsma，看看我给的答案，贝洛万的答案不是必须的，这个问题实际上是重复的答案不是必须的，这个问题实际上是重复的

import { Component }          from '@angular/core';
import { AppService }         from "./app.service";
import { Movie }              from './movie';

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

export class AppComponent {
  title = 'app works!';
  errorMessage: string;
  movies: Movie[];
  mode = 'Observable';

  constructor(private  appService: AppService){}

  ngOnInit(){
    this.getMovies();
    console.log(this.movies);
  }

  getMovies(){
    this.appService.getMovies()
      .subscribe(
        movies => this.movies = movies,
        error => this.errorMessage = <any>error);
  }
}

 export class AppComponent {
  title = 'app works!';
  errorMessage: string;
  movies: Movie[];
  mode = 'Observable';

  constructor(private  appService: AppService){}

  ngOnInit(){
    this.getMovies();
    console.log(this.movies); <--- the value is not set to this.movies yet since data is loading asynchronously 
  }

  getMovies(){
    this.appService.getMovies()
      .subscribe(
        (movies) => {
              this.movies = movies;
              console.log(this.movies);  <--- the value will be set here properly
        },

        (error) => {
              this.errorMessage = <any>error);
        }
  }
}