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

Question

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

Slider Issue preview - 只显示一个蓝点

Slick list div preview here - 带有 slick-list 类的 div 在行内样式中的高度为 1px。

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

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

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

查看问题的网站网址之一： 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");
    });