Как использовать ngFor для создания элементов с детьми в Bootstrap - PullRequest
Новая
       43

Как использовать ngFor для создания элементов с детьми в Bootstrap

0 голосов
/ 25 апреля 2020

У меня есть div, который должен использоваться в карусели, и у меня есть * ngFor l oop с изображениями. Я хочу посмотреть, как можно получить l oop для создания 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 он будет создавать еще один div с изображениями из ngFor и т. д., пока l oop не будет завершен, это jsFiddleLink https://jsfiddle.net/pro2501/8me745h0/3/# & togetherjs = NAgfA0xwsi

1 Ответ

0 голосов
/ 26 апреля 2020

Ваш *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>
...