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

Question

I have a master details component who load a content from a local JSON and change JSON object and Url on buttons click (next/prev) via pipe in Anguar 7. Also I use ngx-slick carousel. 在初始化页面加载图像不显示（您可以在下面的屏幕截图中看到 slider 点），当 go 到下一页时，通过按钮图像显示正常。 只有在轮播设置中将adaptiveHeight选项设置为true时才会发生这种情况，否则一切都很好。 但我需要将该选项设置为 true，因为图像的大小不同。

Slider 问题预览- 只显示一个蓝点

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

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

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

Pipe 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");
    });