Question

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

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

[{＆＃34; ID＆＃34;：2＆＃34;标题＆＃34;：＆＃34;蝙蝠侠＆＃34;＆＃34; CREATED_BY＆＃34;：＆＃34; 1＆＃34 ;，＆＃34; created_at＆＃34;：＆＃34; 2017-06-17T07：19：35.000Z＆＃34;＆＃34;的updated_at＆＃34;：＆＃34; 2017-06-17T07：19： 35.000Z＆＃34;}]

所以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＆＃39;导入{Injectable}; 从＆＃39; @ angular / http＆＃39;;

导入{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日志中获得以下内容：

开始GET＆＃34; /电影＆＃34;对于127.0.0.1 2017-06-17 10:35:00 +0200 由MoviesController处理#index为HTML 电影加载（1.0ms）SELECT movies。* FROM movies 在6ms内完成200 OK（浏览次数：4.0ms | ActiveRecord：1.0ms）

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

开始GET＆＃34; /电影＆＃34;对于127.0.0.1 2017-06-17 10:37:59 +0200 由MoviesController处理#index为HTML 电影加载（0.5ms）SELECT movies。* FROM movies 在4ms内完成200 OK（浏览次数：2.8ms | ActiveRecord：0.5ms）

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

Answer 1

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

请注意，当您调用返回this.appService.getMovies()的{{1}}时，这实际上是一个异步操作。在Observable<Movie[]>你AppComponent到它并获得值 Asynchrously 。

请注意subscribe代码 -

AppComponent

希望这有帮助。

<强> EXTRA

有关可观察

的更多信息，请参阅

Angular http.get无法获取数据

1 个答案: