Angular http.get没有获取数据

我有一个简单的Rails5 API，我试图从我的Angular应用程序中的API获取数据 .

首先，如果我访问：http://localhost:3000/movies我得到这个结果：

[{“id”：2，“title”：“蝙蝠侠”，“created_by”：“1”，“created_at”：“2017-06-17T07：19：35.000Z”，“updated_at”：“2017-06 -17T07：19：35.000Z“}]

所以Rails方面有效 .

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

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

movie.ts

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

app.service.ts

从'@ angular / core'导入;从'@ 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);
  }

}

最后我的 app.component.ts

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);
  }
}

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

开始获取“/ movies”为127.0.0.1于2017-06-17 10:35:00 0200由MoviesController处理#index为HTML电影加载（1.0ms）选择电影 . * FROM电影在6ms完成200 OK（浏览次数： 4.0ms | ActiveRecord：1.0ms）

当我访问http://localhost:4200/时，我得到了我的Angular应用程序

开始获取“/ movies”为127.0.0.1于2017-06-17 10:37:59 0200由MoviesController处理#index为HTML电影加载（0.5ms）选择电影 . * FROM电影在4ms完成200 OK（浏览次数： 2.8ms | ActiveRecord：0.5ms）

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