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

【问题标题】：How to use ngFor to create elements with children in Bootstrap如何使用 ngFor 在 Bootstrap 中创建带有子元素的元素
【发布时间】：2020-08-09 10:15:48
【问题描述】：

我有一个要在轮播中使用的 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

【问题讨论】：

你能分享一下jsfiddle链接吗？
@AbdulBasit 嗨，我已经更新并添加了一个 JsFiddle 链接
请为 Angular 使用 stackblitz。你会喜欢的。谢谢。只需处理静态数据即可。

标签： angular loops twitter-bootstrap-3 bootstrap-4 ngfor

【解决方案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>

【讨论】：