Javascript 使用fetch添加Omdb Api？

我正在尝试使用fetch使用OMDB api，我在网络中看到我的数据库正在工作。 然而，它并没有显示在我的第6页。 我在这段代码中遗漏了什么

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData() {
    return fetch('http://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b'); 
  } 
}

还有这个

import { DataService } from './../data.service';
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {

  movies = [
    {Title: 'Harry Potter'},
    {Title: 'Space Jam'}
  ]

  constructor(private data:DataService) { }

  ngOnInit() {
    // fetch('http://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b')
    //   .then(response => response.json())
    //   .then( res => this.movies = res);

    this.data.getData()
      .then((response) => {response.json()
      .then((data)=> {this.data = data;
      });
    });
  }

<p>
  movie-list works!
</p>

<div class="card">
  <ul>
    <li *ngFor="let movie of movies">
      <h2>{{movie.Title}}</h2>
      <h3>{{movie.Plot}}</h3>
    </li>
  </ul>
</div>

还有这个

import { DataService } from './../data.service';
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {

  movies = [
    {Title: 'Harry Potter'},
    {Title: 'Space Jam'}
  ]

  constructor(private data:DataService) { }

  ngOnInit() {
    // fetch('http://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b')
    //   .then(response => response.json())
    //   .then( res => this.movies = res);

    this.data.getData()
      .then((response) => {response.json()
      .then((data)=> {this.data = data;
      });
    });
  }

<p>
  movie-list works!
</p>

<div class="card">
  <ul>
    <li *ngFor="let movie of movies">
      <h2>{{movie.Title}}</h2>
      <h3>{{movie.Plot}}</h3>
    </li>
  </ul>
</div>

电影列表有效！



{{movie.Title}
{{movie.Plot}

这就是我得到的。。。见下图

如何从数据库中查看标题和绘图

---

谢谢你的帮助

我认为

response.json（）

必须与

fetch

getData（）{
返回获取（'http://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b')
。然后（（响应）=>{
response.json（）
});
}
this.data.getData（）.then（（数据）=>{
这个数据=数据；
});您尚未将获取的数据添加到电影数组中

movies = [
{Title: 'Harry Potter'},
{Title: 'Space Jam'}]

这就是您没有看到所需数据的原因

编辑：您可以尝试执行以下操作：

    let movies = [];

    function doFetch() {
        fetch('http://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b', {
            method: "get"
        }).then(function (response) {
            return response.text();
        }).then(function (text) {
            let json = JSON.parse(text);
            let data = { Title: json.Title, Plot: json.Plot }
            movies.push(data);
        });
    }

    doFetch();

这样，您就可以用数据填充数组，以便以后显示。
我该怎么做？现在{This.data=data}不起作用了！！怎么了？如果我通过搜索工作将api更改为“”？我应该如何更改功能？