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

Question

这就是我想要做的：（我认为它被称为 angular carousel）

我正在尝试使用离子组件 ion-slides 和 ion-slide，如下所示

 <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>

后面的代码动态地创建了海报和名称将在其中放置的模板。如您所见，*ngFor 中的变量“movie”位于 .ts 的导出类中，如下所示（这是 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)

它出现了两次（电影变量），一个被评论（这种方式就像一个魅力，但由于它不是动态的，它不适合我），另一个，它不起作用。我怀疑这是因为该行在 fetch 提供数据之前正在编译。我正在使用 TMDB api 获取电影数据以以轮播方式显示。所以这就是问题所在，html 没有呈现，我不知道为什么，我是 angular 新手。这是我正在使用的东西：

• 离子 6.16.3
• Angular 11.2.12
• 节点：14.16.1

我不确定这是否有帮助，但使用命令 ionic start 我使用空白模板创建了项目，然后我在主文件夹中找到了接下来的 6 个文件：

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

顺便说一句，home.page.ts 代码末尾的 console.log(array) 在控制台中显示了这一点：

这就是我说private movie = array 时应该有的变量 movie 但由于某种原因它没有它，因此 html 没有可使用的数据，因此没有任何东西可以渲染

编辑：我刚刚以另一种方式进行了测试，但结果相同，我将 fetch 放在 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

我在您上次编辑中注意到的几件事：

1. 您的变量 array 在组件外部定义。
2. 您的 movie 成员是私有的，这可能会在您尝试构建时影响您。
3. 您希望 movie 成为一个包含电影对象的数组，以便您的模板可以正常工作 - <img src="{{peli.poster}}" />（也可以将其称为 movies ;)）

从您上次的编辑开始：

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";