ngFor in array within another array with API links

Question

I am using the API publishes swapi to list Wars star movies in a list and within each movie I want to list the characters, the json response of the api is this:

{
"title": "A New Hope",
"episode_id": 4,
"opening_crawl": "It is a period of civil war.\r\nRebel spaceships, striking\r\nfrom a hidden base, have won\r\ntheir first victory against\r\nthe evil Galactic Empire.\r\n\r\nDuring the battle, Rebel\r\nspies managed to steal secret\r\nplans to the Empire's\r\nultimate weapon, the DEATH\r\nSTAR, an armored space\r\nstation with enough power\r\nto destroy an entire planet.\r\n\r\nPursued by the Empire's\r\nsinister agents, Princess\r\nLeia races home aboard her\r\nstarship, custodian of the\r\nstolen plans that can save her\r\npeople and restore\r\nfreedom to the galaxy....",
"director": "George Lucas",
"producer": "Gary Kurtz, Rick McCallum",
"release_date": "1977-05-25",
"characters": [
    "https://swapi.co/api/people/1/",
    "https://swapi.co/api/people/2/",
    "https://swapi.co/api/people/3/",
    "https://swapi.co/api/people/4/",
    "https://swapi.co/api/people/5/",
    "https://swapi.co/api/people/6/",
    "https://swapi.co/api/people/7/",
    "https://swapi.co/api/people/8/",
    "https://swapi.co/api/people/9/",
    "https://swapi.co/api/people/10/",
    "https://swapi.co/api/people/12/",
    "https://swapi.co/api/people/13/",
    "https://swapi.co/api/people/14/",
    "https://swapi.co/api/people/15/",
    "https://swapi.co/api/people/16/",
    "https://swapi.co/api/people/18/",
    "https://swapi.co/api/people/19/",
    "https://swapi.co/api/people/81/"
],
"planets": [
    "https://swapi.co/api/planets/2/",
    "https://swapi.co/api/planets/3/",
    "https://swapi.co/api/planets/1/"
],
"starships": [
    "https://swapi.co/api/starships/2/",
    "https://swapi.co/api/starships/3/",
    "https://swapi.co/api/starships/5/",
    "https://swapi.co/api/starships/9/",
    "https://swapi.co/api/starships/10/",
    "https://swapi.co/api/starships/11/",
    "https://swapi.co/api/starships/12/",
    "https://swapi.co/api/starships/13/"
],
"vehicles": [
    "https://swapi.co/api/vehicles/4/",
    "https://swapi.co/api/vehicles/6/",
    "https://swapi.co/api/vehicles/7/",
    "https://swapi.co/api/vehicles/8/"
],
"species": [
    "https://swapi.co/api/species/5/",
    "https://swapi.co/api/species/3/",
    "https://swapi.co/api/species/2/",
    "https://swapi.co/api/species/1/",
    "https://swapi.co/api/species/4/"
],
"created": "2014-12-10T14:23:31.880000Z",
"edited": "2015-04-11T09:46:52.774897Z",
"url": "https://swapi.co/api/films/1/"

}

The array with the characters from the links to /people which is where the characters are in the api, the ngFor I made is this:

  <li *ngFor="let filme of filmes$">
      <p>{{ filme.title }} , {{filme.episode_id}}</p>
      <p>{{ filme.opening_crawl }}</p>
      <p *ngFor= "let character of filme.characters">{{character}}</p>
  </li>

but he lists the links, wanted to know how it is possible for me to list the characters in this case, the code to search the movies is:

   getFilmes(): Observable<Filme[]> {
      return this.http.get<Filme[]>(`${this.url}/films`)
        .pipe(
          map((resposta: any) => resposta.json())
        )
  }

Answer 1

I managed to do it using Forkjoin:

 getFilmesById(id: number): Observable<any> {
return this.http.get<any>(`${this.url}/films/${id}`)
  .pipe(switchMap(movie => new Observable(observer => {
    forkJoin(movie.characters.map((character: string) => this.http.get(character)))
      .subscribe((characters: any) => {
        movie.characters = characters;
        observer.next(movie);
        observer.complete();
      });
    forkJoin(movie.starships.map((starship: string) => this.http.get(starship)))
      .subscribe((starships: any) => {
        movie.starships = starships;
        observer.next(movie);
        observer.complete();
      });
    forkJoin(movie.planets.map((planet: string) => this.http.get(planet)))
      .subscribe((planets: any) => {
        movie.planets = planets;
        observer.next(movie);
        observer.complete();
      });
  })));