使用 *ngFor 時，旋轉木馬滑塊在 Angular 8 中不起作用

Question

我目前正在研究 Angular 8。我的滑塊適用於靜態數據。 但是當我嘗試遍歷一些數據時，我的“左”和“右”按鈕不起作用。 我無法滾動這些圖片。 我使用 *ngfor 獲取我的圖像。 我已經看到了很多解決方案。 但是沒有人能夠解決我的問題。 任何幫助將不勝感激。 謝謝你

我的 HTML 代碼

<div class="container-fluid">
        <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
            <div class="carousel-inner row w-10 mxauto" role="listbox">
                <div class="carousel-item col-md-4 active" *ngFor="let reward of readableRewards">
                    <img src="{{reward?.Image}}" class="img-fluid mx-auto d-bloc" alt="slide 1">
                </div>

            </div>
            <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
                <i class="fa fa-chevron-left fa-lg text-muted"></i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
                <i class="fa fa-chevron-right fa-lg text-muted"></i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

我的JS代碼

      $('#carouselExample').on('slide.bs.carousel', function (e) {

var $e = $(e.relatedTarget);

var idx = $e.index();
console.log("IDX :  " + idx);

var itemsPerSlide = 8;
var totalItems = $('.carousel-item').length;

if (idx >= totalItems-(itemsPerSlide-1)) {
    var it = itemsPerSlide - (totalItems - idx);
    for (var i=0; i<it; i++) {
        // append slides to end
        if (e.direction=="left") {
            $('.carousel-item').eq(i).appendTo('.carousel-inner');
        }
        else {
            $('.carousel-item').eq(0).appendTo('.carousel-inner');
        }
    }
}
});

我的 CSS 代碼

@media (min-width: 768px) {

  /* show 3 items */
  .carousel-inner .active,
  .carousel-inner .active + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item {
      display: block;
  }

  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
      transition: none;
      margin-right: initial;
  }

  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
    position: relative;
    transform: translate3d(0, 0, 0);
  }

  .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
      position: absolute;
      top: 0;
      right: -33.3333%;
      z-index: -1;
      display: block;
      visibility: visible;
  }

  /* left or forward direction */
  .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .carousel-item-next.carousel-item-left + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
      position: relative;
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
  }

  /* farthest right hidden item must be abso position for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      display: block;
      visibility: visible;
  }

  /* right or prev direction */
  .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .carousel-item-prev.carousel-item-right + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
      position: relative;
      transform: translate3d(100%, 0, 0);
      visibility: visible;
      display: block;
      visibility: visible;
  }

}

Answer 1

這不是答案，而是幫助您找到答案的途徑。 因為我不能寫評論，但我可以寫答案，所以我會寫在這里。 由於滑塊在沒有獲取數據的情況下正常工作，因此問題在於獲取數據。 這部分代碼沒有顯示。 但如果它導致錯誤，則可能會因此暫停進一步的執行。 查看或顯示控制台中的消息和生成數據的代碼，以便它們可以幫助您。