omdbapi.com REST api JSON到Angular 5

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MovieService {
  private apiUrl = 'http://www.omdbapi.com/';

  constructor(private http: HttpClient) { }

  getMovieDetails(title: string) {
    const apiKey = 'your-api-key'; // 替换为你的omdbapi.com API密钥
    const url = `${this.apiUrl}?apikey=${apiKey}&t=${title}`;

    return this.http.get(url);
  }
}

import { Component } from '@angular/core';
import { MovieService } from './movie.service';

@Component({
  selector: 'app-movie',
  template: `
    <h2>{{ movie.Title }}</h2>
    <p>导演: {{ movie.Director }}</p>
    <p>类型: {{ movie.Genre }}</p>
    <p>上映时间: {{ movie.Released }}</p>
  `,
  providers: [MovieService]
})
export class MovieComponent {
  movie: any;

  constructor(private movieService: MovieService) { }

  searchMovie(title: string) {
    this.movieService.getMovieDetails(title)
      .subscribe(data => {
        this.movie = data;
      });
  }
}