使用 fetch 后，离子角度组件未呈现

Question

This is what I'm trying to make: (I think it's called angular carousel)

And I'm trying to do it with the ionic components ion-slides and ion-slide as I'm showing down below

 <div class="top-rated-movies">
    <div class="header">
      <img src="../../assets/img/top-rated-movies.png" alt="">
    </div>
    <div class="carousel-top-rated-movies">         <!-- carousel -->
      <ion-slides [options]="sliderConfigMovie">
        <ion-slide  *ngFor="let peli of movie"  >            
  
          <div class="template">
            <div class="movie">  
              <img src="{{peli.poster}}" alt="">            
            </div>
            
            <div class="nombre">
              <ion-label>{{peli.name}}</ion-label>
            </div>
          </div>            
        </ion-slide>
      </ion-slides>
    </div>
  </div>

This code behind creates dinamically the template in which the poster and name is going to rest. As you can see the variable "movie" in the *ngFor is in the export class from the .ts as you can see down below(this is the home.page.ts ):

    import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {


private movie = array;


 /* 
  private movie = [
    {id:1,
    nombre:'Forrest Gump',
    url: '../../assets/img/forrest-gump.png'
    },
    {id:2,
      nombre:'Harry Potter 1',
      url: '../../assets/img/harry-potter.png'
    },
    {id:3,
      nombre:'Hachiko',
      url: '../../assets/img/hachiko.png'
    },
    {id:4,
      nombre:'Rapido y Furioso 1',
      url: '../../assets/img/ff1.png'
    },
    {id:5,
      nombre:'American Reunion',
      url: '../../assets/img/american-reunion.png'
    },
    {id:6,
      nombre:'El Conjuro 2',
      url: '../../assets/img/conjuro2.png'
    }
    ] */
 
   sliderConfigMovie = {
    slidesPerView: 2.7      
  }

  constructor() {   }
}

  const api_url = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=2120307b21e02afa98bde189c351c683';
  const img_url = "https://image.tmdb.org/t/p/w500";

 
  var array = [];

  fetch(api_url)
    .then(res => res.json())
    .then(data => {      
    
        var obj = data.results;  
        
        let arr;       
    
        obj.forEach(pelicula=>{          
              let arr = [
              {nombre:pelicula.title,                  
              poster: img_url+pelicula.poster_path
              }]
              array.push(arr)               
        })        
    })

    console.log(array)

It appears twice(the movie variable), one is commented(this way works like a charm but since it's not dynamic it doesn't do the job for me) and the other one, well it doesn't work. I suspect it's because that line is compiling before fetch provides the data. I'm working with the TMDB api fetching for movie data to show in a carousel-something way. So that is the problem, the html is not rendering and I'm not sure why, I'm new to angular. This is the stuff that I'm using:

• Ionic 6.16.3
• Angular 11.2.12
• Node: 14.16.1

I'm not sure if this is helpful but with the command ionic start I created the project with a blank template and then I found the next 6 files in the home folder:

- home.module.ts
- home.page.ts
- home.page.html
- home.page.scss
- home.page.spec.ts
- home-routing.module.ts

by the way, that console.log(array) at the end of the home.page.ts code shows this in console:

This is what the variable movie it's supposed to have when I said private movie = array but for some reason it's not having it and because of it the html has no data to work with therefor nothing to render

EDIT: I've just tested this other way but same result, I put the fetch inside a ngOnInit

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{

  ngOnInit(){

    fetch(api_url)
    .then(res => res.json())
    .then(data => {      
    
        var obj = data.results;  
        
        let arr;       
    
        obj.forEach(pelicula=>{          
              let arr = [
              {nombre:pelicula.title,
              rating:pelicula.vote_average,
              poster: img_url+pelicula.poster_path
              }]
              array.push(arr)               
        })        
    })

  }//end of ngOnInit

private movie = array;

   sliderConfigMovie = {
    slidesPerView: 2.7      
  }

  constructor() {   }
}//end of export class HomePage

  const api_url = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=2120307b21e02afa98bde189c351c683';
  const img_url = "https://image.tmdb.org/t/p/w500";

 
  var array = [];

Answer 1

Several things I'm noticing within your last edit:

1. Your variable array is defined outside of the component.
2. Your movie member is private, this could affect you when you try to do a build.
3. You want movie to be an array with movie objects inside so your template will work- <img src="{{peli.poster}}" /> (perhaps call this movies too ;) )

From your last edit:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{

  ngOnInit(){

    fetch(api_url)
    .then(res => res.json())
    .then(data => {      
    
        var obj = data.results;         
    
        obj.forEach(pelicula => {          
              let peli = {
                 nombre: pelicula.title,
                 rating: pelicula.vote_average,
                 poster: img_url+pelicula.poster_path
              }
              movie.push(peli)               
        })        
    })

  }//end of ngOnInit

  public movie = [];

   sliderConfigMovie = {
    slidesPerView: 2.7      
  }

  constructor() {   }
}//end of export class HomePage

  const api_url = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=2120307b21e02afa98bde189c351c683';
  const img_url = "https://image.tmdb.org/t/p/w500";