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

Question

我正在尝试通过 ngFor 迭代包含图像 url 的字符串数组来动态填充 Bootstrap 4 轮播。轮播没有显示图像，尽管查看生成的标记一切看起来都很好。我猜这个组件是在 Angular 为每张幻灯片添加 div 之前渲染的，因为“轮播幻灯片”div 的高度为 0px，我认为这就是隐藏幻灯片本身的原因。

幕后我有一个名为“primarySlideshowImages”的公开属性，其中包含一组 url：

    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 组件、开源组件、可购买的组件等。我想尝试使用 bootstrap 组件来解决这个问题，因为我很新在这项技术上，如果有一些我不明白我应该做的事情，我讨厌跳到一个简单的解决方案。再次感谢您提供的任何帮助。

Answer 1

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

尝试为它们设置样式。例如 .carousel-item {width:200px;高度：200px;}

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