ngx-bootstrap 多列表轮播在 Angular 10 中不起作用答案

【问题标题】：ngx-bootstrap multilist carousel not working in angular 10ngx-bootstrap 多列表轮播在 Angular 10 中不起作用
【发布时间】：2020-08-26 15:51:58
【问题描述】：

我正在使用"ngx-bootstrap": "6.0.0", 实现一个多列表轮播，但它看起来在angular: 10.0.2 中不起作用。我也试过ngx-bootstrap: 6.0.0，也没用

它只显示一张幻灯片 [第一张图片] 和其余图片的占位符。比如itemsPerSlide 是 3，它只显示 1 个图像和 2 个图像的占位符。

组件代码

@ViewChild(CarouselComponent) myCarousel: CarouselComponent;
  loopcomplete = true;
  slidesChangeMessage;
  itemsPerSlide = 3;
  singleSlideOffset = true;
  noWrap = true;
  activeRange = 0;

  slides = [
    {image: 'assets/slides/1.jpeg'},
    {image: 'assets/slides/2.jpeg'},
    {image: 'assets/slides/3.jpeg'},
    {image: 'assets/slides/4.jpeg'},
    {image: 'assets/slides/5.jpeg'},
    {image: 'assets/slides/6.jpeg'},
    {image: 'assets/slides/7.jpeg'},
    {image: 'assets/slides/8.jpeg'},
    {image: 'assets/slides/9.jpeg'},
    {image: 'assets/slides/10.jpeg'},
    {image: 'assets/slides/11.jpeg'},
    {image: 'assets/slides/12.jpeg'},
  ];

HTML 代码

<div>
  <carousel [itemsPerSlide]="itemsPerSlide"
            [singleSlideOffset]="singleSlideOffset"
            [noWrap]="!noWrap"
            [interval]="false"
            [startFromIndex]="0"
            (slideRangeChange)="onSlideRangeChange($event)">
    <slide *ngFor="let slide of slides; let index=index">
      <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
      <div class="carousel-caption">
        <h4>Slide {{index}}</h4>
      </div>
    </slide>
  </carousel>
</div>

【问题讨论】：

标签： angular ngx-bootstrap angular10

【解决方案1】：

它看起来像轮播中的错误。我明白了，https://github.com/valor-software/ngx-bootstrap/issues/5879 报告了类似的问题，所以，希望在最近的将来看看它。无论如何，我将在那里分享有关修复的任何信息

Workaround 来自上述链接问题：

在检查轮播元素 css 时，请注意 .carousel-item 类将 margin-right 设置为 -100%

要解决此问题，请添加以下 css：

.carousel-item {
    margin-right: 0;
}

【讨论】：

【解决方案2】：

尝试升级到与 Angular v9.x 和 v10.x 兼容的 v6.0.0！

【讨论】：

对我不起作用，我用代码更新了问题

【解决方案3】：

你应该将你的 ngx-bootstrap 更新到版本 6。请检查他们的 npm 包的兼容性。

【讨论】：

对我不起作用，我用代码更新了问题

【解决方案4】：

返回 Bootstrap 4.0.0 版本。它对我有用。

它不适用于 4.5.0 版。

【讨论】：