Angular / OMDB API / Попытка визуализировать более 1 результата, просматривая массив аниме

Question

Я создал сервис для получения аниме-данных из OMDB. Это работает правильно, но моя проблема в том. он показывает только последнее аниме из массива аниме, потому что, когда компилятор приходит к возвращаемой строке, значение searchUrl является последним значением метода l oop (Наруто).

Я пытаюсь получить this.http.get внутри карты l oop - чтобы я мог отображать 3 разных аниме на каждой итерации. Но я просто не могу, и это не правильный способ сделать это.

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";

@Injectable({
  providedIn: "root"
})
export class AnimeService {
   animes = ["Bleach", "Another", "Naruto"];
  anime;
  omdbUrl: string = "http://www.omdbapi.com/?apikey=99390dda&t=";
  searchUrl;
  constructor(private http: HttpClient) {}

  getAnime(): Observable<any> {
    this.animes.map(anime => {
      this.anime = `${anime}`;
      // console.log(anime);
      this.searchUrl = this.omdbUrl + anime;
      console.log(this.searchUrl);
    });
    return this.http.get(`${this.searchUrl}`);
  }
}

typescript file

export class AppComponent implements OnInit {
  apiResult = [
    {
      title: "",
      image: "",
      releaseYear: ""
    },
    {
      title: "",
      image: "",
      releaseYear: ""
    }
  ];

  constructor(private animeService: AnimeService) {}

  ngOnInit() {
    this.animeService.getAnime().subscribe(anime => {
      this.apiResult.map(singleApiResult => {
        singleApiResult.title = anime.Title;
        singleApiResult.image = anime.Poster;
        singleApiResult.releaseYear = anime.Released;
      });
    });
  }

and the html file

<div *ngFor="let anime of apiResult">
  <h1>{{ anime.title }}</h1>
  <img [src]="anime.image"/>
  <p>{{ anime.releaseYear }}</p>
</div>