Изображение Bootstrap Carousel отображается два раза в Angular 6
Я новичок в разработке. Здесь, в моем проекте, у меня есть карусель, в настоящее время у меня есть 10 изображений (получение путей к изображениям из базы данных через ответ json при загрузке страницы).
В чем моя проблема: первое изображение отображается два раза.
app.component.ts
this.CartdataService.get_Basic_Images().subscribe(
data => {
this.get_Carousel_Images = data['1'];
this.slider_Active_Item = data[1][0]['CAROUSEL_IMAGE_PATHS'];
});
Здесь я выбрал первое изображение из ответа json и установил его в активный элемент. Я хочу установить его автоматически.
app.component.HTML
<div class = "col">
<div class = "container">
<div class = "row">
<div id = "carouselExampleControls" class = "col-sm-12 col-md-12 carousel slide" data-ride = "carousel">
<div class = "carousel-inner">
<div class = "carousel-item active">
<img class = "d-block w-100" src = "{{slider_Active_Item}}" alt = "First slide">
</div>
<div *ngFor = "let sliders of get_Carousel_Images; let i = index" class = "carousel-item">
<img class = "d-block w-100" [src] = "sliders['CAROUSEL_IMAGE_PATHS']" [alt] = "'img' + i">
</div>
</div>
<a class = "carousel-control-prev" href = "#carouselExampleControls" role = "button" data-slide = "prev">
<span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
<span class = "sr-only">Previous</span>
</a>
<a class = "carousel-control-next" href = "#carouselExampleControls" role = "button" data-slide = "next">
<span class = "carousel-control-next-icon" aria-hidden = "true"></span>
<span class = "sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
может кто-нибудь помочь мне исправить это.
@AdrianSawicki stackblitz.com/edit/…
@AdrianSawicki здесь я привел код stacklitz, вы можете увидеть, что "первый слайд" появляется два раза, я не смог воспроизвести карусель на 100%, пути к изображениям там не работают
@AdrianSawicki, ты это проверил?
Ответы 1
Вы должны удалить первое изображение из списка изображений. Вы можете отфильтровать это. У вас двойное первое изображение из-за:
<div class = "carousel-item active">
<img class = "d-block w-100" src = "{{slider_Active_Item}}" alt = "First slide">
</div>
Вот первое активное изображение, а затем в цикле вы используете то же самое, потому что оно не отфильтровано из списка доступных изображений.
Если вы отфильтруете его, вы добавите каждое изображение без первого, которое уже использовалось.
this.get_Carousel_Images = data['1'].filter((img, i) => i !== 0);
Другой вариант - просто удалить это изображение из списка данных и дать прямую ссылку на ваше первое активное изображение. Нет необходимости выбирать его из массива.
Можете ли вы представить краткий обзор вашей проблемы? Тебе было бы легче помочь. Если вы хотите использовать начальную загрузку в приложении angular, вы можете подумать об использовании valor-software.com/ngx-bootstrap/#/carousel. Вы получите доступ к начальной загрузке, выполненной более угловатым способом. Нет необходимости снова изобретать колесо.