Angular 6如何从YTS API获取数据

Question

你好，有人可以帮我从YTS API提取数据

service.ts

 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import {Movies} from '../models/movies.model'; @Injectable () export class MovieRequestService { private url = 'https://yts.am/api/v2/list_movies.json?limit=50'; moviesData: {movies: Movies} = { movies: undefined }; constructor(private myHttp: HttpClient ) { this.myHttp.get(this.url).subscribe( (response: Movies) => { this.moviesData.movies = response; }); console.log(this.moviesData); } } 

第二个文件组件

 import { Component, OnInit } from '@angular/core'; import { MovieRequestService } from '../../shared/services/movie-request.service'; import { HttpClient} from '@angular/common/http'; import { Movies } from '../../shared/models/movies.model'; @Component({ selector: 'app-movie-list', templateUrl: './movie-list.component.html', styleUrls: ['./movie-list.component.css'] }) export class MovieListComponent implements OnInit { localData: {movies: Movies}; constructor(private movieService: MovieRequestService, private http: HttpClient) { this.localData = this.movieService.moviesData; } ngOnInit() { } } 

我做了一个电影模型的另一个文件

 import { Movie } from './movie.model'; export interface Movies { data: { movies: [Movie]; }; } 

最后一部电影

 export interface Movie { id: number; title: string; year: number; runTime: number; genre: string[]; } 

也许我写的对吗？ 我从api提取数据到控制台，但是我无法将数据提取到页面有人可以帮助我吗？

Answer 1

您的服务应该只提供呼叫，而不是数据本身。 因此，让我们采取另一种方法。

服务

export class MovieRequestService {
  private url = 'https://yts.am/api/v2/list_movies.json?limit=50';
  constructor(private myHttp: HttpClient )  {

  }

  getMovie() {
    return this.myHttp.get(this.url);
  }
}

零件

export class MovieListComponent implements OnInit {
  localData;
  constructor(private movieService: MovieRequestService, private http: HttpClient) {
  }

  ngOnInit() {
    let sub = this.movieService.getMovie().subscribe(response => this.localData = response);
  }
}

或者，也许您想将回调作为参数传递。 在这种情况下：

服务

export class MovieRequestService {
  private url = 'https://yts.am/api/v2/list_movies.json?limit=50';
  constructor(private myHttp: HttpClient )  {

  }

  getMovie(callback) {
    return this.myHttp.get(this.url).subscribe(callback);
  }
}

零件

export class MovieListComponent implements OnInit {
  localData;
  constructor(private movieService: MovieRequestService, private http: HttpClient) {
  }

  ngOnInit() {
    this.movieService.getMovie(response => this.localData = response);
  }
}

我更喜欢第一种选择，因为您可以控制订阅。