在 ngx-slick 轮播中从本地 JSON 加载图像时出现问题 - Angular 7

Question

我有一个主细节组件，它从本地 JSON 加载内容并更改 JSON 对象和 Url 通过管道单击按钮 (next/prev) Anguar 7. 我还使用 ngx-slick 轮播。在初始页面上加载图像不显示（您只能看到一个滑块点，如下面的屏幕截图所示），当转到下一页并且通过按钮图像正常显示在上一页时。只有在旋转木马设置中将 adaptiveHeight 选项设置为 true 时才会发生这种情况，否则一切都很好。但是我需要将该选项设置为 true，因为图像的大小不同。

Slider Issue preview - 只显示一个蓝点

Slick list div preview here - div with slick-list class 在内联样式中的高度为 1px。

在 Google / Whosebug 研究之后我发现这可能是因为图像在滑块之前加载。我尝试了不同的方法来解决这个问题，但不幸的是没有成功。 :(

组件Url： https://github.com/markostalma/markostalma-dev/blob/master/src/app/work/work-single/work-single.component.ts

管道Url： https://github.com/markostalma/markostalma-dev/blob/master/src/app/pipes/master-details.pipe.ts

站点 url 之一查看问题： https://www.markostalma.ninja/selected-work/gizmosphere-infographic

提前致谢！

Answer 1

错误修复！这是目前的解决方案。

  // Fix slider adaptive height bug on init
  slickInit(slideEvent) {
    slideEvent.slick.$slider.find('img').first().on('load', () => {
      let height = $('.slickImg-item').height();
      $('.slick-list').height(height);
      console.log("Slider Init");
    });

在 ngx-slick 轮播中从本地 JSON 加载图像时出现问题 - Angular 7

Issue with loading images from local JSON in ngx-slick carousel - Angular 7

javascript

pipe

carousel

slick.js

angular