在div内部使用ngfor不会显示静态API响应的结果

时间:2018-12-17 05:46:43

标签: angular

我有RESTful api,它提供了类似

的结果集
{
    "count": 10,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 1,
            "title": "Rocky (1976)",
            "description": "A small-time boxer gets a supremely rare chance to fight a heavy-weight champion in a bout in which he strives to go the distance for his self-respect.",
            "moviePoster": "http://127.0.0.1:8000/pic_folder/no-poster.jpeg",
            "avg_rating": 5,
            "no_of_ratings": 1,
            "maxRatings": 5
        },
        {
            "id": 2,
            "title": "Rocky (1976)",
            "description": "A small-time boxer gets a supremely rare chance to fight a heavy-weight champion in a bout in which he strives to go the distance for his self-respect.",
            "moviePoster": "http://127.0.0.1:8000/pic_folder/no-poster.jpeg",
            "avg_rating": 3.5,
            "no_of_ratings": 2,
            "maxRatings": 5
        }
    ]
}

内部component.ts中,我有以下方法:

getMovies() {
this.movieService.getMovies().subscribe(
  response => {
    this.movies= response.JSON;
    console.log('response.JSON',response);
  },
  error => {
    this.snackBar.open('Error getting Movies', '', { duration: 3000 });
  }
);
  }

我正在尝试在component.html中打印“电影标题”,并且我已经关注了div,但是在html页面上什么也没打印。

 <div class="container">
 <h2>Movies:</h2>
  <div *ngFor="let movie of movies;" >
  <h4>{{movie.title}}</h4>
</div>

1 个答案:

答案 0 :(得分:1)

执行此更改

this.movieService
.getMovies()
.subscribe( (response) => { this.movies = response.results;},