Question

我试图通过ngFor动态填充Bootstrap 4轮播包含图像网址的字符串数组。旋转木马没有显示图像，虽然查看标记生成的一切看起来很好。我猜测组件是在Angular添加每个幻灯片的div之前渲染的，因为“carousel slide”div的高度为0px，我认为这就是隐藏幻灯片本身。

幕后花絮我有一个名为“primarySlideshowImages”的公开属性，其中包含一系列网址：

    ngOnInit() {
        this.primarySlideshowImages = this.photoService.getImageLists(ImageListKeys.BrochureProductsPrimary);
    }

HTML标记如下所示：

<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
    <div *ngFor="let image of primarySlideshowImages; let i = index" class="carousel-item {{ (i == 0) ? 'active' : ''}}">
        <img class="d-block img-fluid w-100" [src]="image" >
    </div>
</div>
<a class="carousel-control-prev" href="#carousel1" 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="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>

仅供参考，我通过硬编码测试了这一点，而不是动态添加图像，一切都很好。我认为这是时间问题，但考虑到我对这项技术的相对不熟悉，我现在还不知道如何搜索解决方案。

提前感谢您的协助。我确实认识到我可以使用其他组件和方法 - ng-bootstrap组件，开源组件，可购买组件等。我想尝试使用引导组件来解决这个问题因为我很新在这种技术和讨厌的情况下，如果有什么我不理解我应该做的事情，那么就不愿意跳到一个简单的解决方案。再次感谢您提供的任何帮助。

Answer 1

包含图像的div可能是包含图像的div的宽度和/或高度为/。

尝试在它们上设置样式。例如.carousel-item {width：200px;身高：200px;}

此外，尝试使用开发工具上的“网络”选项卡检查浏览器是否正在检索图像。

通过Angular 4的Bootstrap 4轮播的动态填充不显示图像

1 个答案: