如何使用ngFor在Bootstrap中创建带有子元素的元素

Question

我有一个要在轮播中使用的div，并且我有一个* ngFor循环，其中包含图像，我想看看如何在代码中使用该循环来创建具有多个图像的div，如下所示

<div class="carousel-item row no-gutters active" *ngFor="let movie of movies">
                <div class="col-3 float-left "><img width="280" class="fluid" [src]="'https://image.tmdb.org/t/p/w500' + movie.poster_path"></div>
                <div class="col-3 float-left "><img width="280" class="fluid" [src]="'https://image.tmdb.org/t/p/w500' + movies.poster_path"></div>
                <div class="col-3 float-left "><img width="280" class="fluid" [src]="'https://image.tmdb.org/t/p/w500' + movies.poster_path"></div>
                <div class="col-3 float-left "><img width="280" class="fluid" [src]="'https://image.tmdb.org/t/p/w500' + movies.poster_path"></div>
            </div>

并且在创建了该div之后，它将使用ngFor中的图像创建另一个div，以此类推，直到循环完成，这是一个jsFiddleLink https://jsfiddle.net/pro2501/8me745h0/3/#&togetherjs=NAgfA0xwsi

Answer 1

您的*ngFor应该在图像的div上，如下所示：

<div class="carousel-item row no-gutters active">
  <div class="col-3 float-left" *ngFor="let movie of movies"><img width="280" class="fluid" [src]="'https://image.tmdb.org/t/p/w500' + movie.poster_path"></div>
</div>