javascript - "owl-carousel-o"无法正确使用 Angular 11 中的模型

Question

我正在使用 <owl-carousel-o>使用 Bootstrap 模型。

问题如下

当点击图片时，模型会打开但数据显示不正确，第一次按f3，f10，f11，f12数据会显示成功。它在不使用模型和完美加载数据的情况下工作正常。加载数据不需要时间。只有按 f3、f10、f12、f11 功能键后才会显示数据。我认为它的创建问题是由于 popper.min.js 或 jquery.min.js但它们对于打开模型是强制性的

我也试过 tether.min.js但遇到同样的问题。

第一次模型看起来像:

按下功能键图像后的样子:

模态代码:

<div [style.display]="showModal ? 'block' : 'none'" class="modal" id="imagemodal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="row">
        <div class="container d-flex justify-content-center">

            <div class="container d-flex justify-content-center">

                <div class="card" style="width: 28rem;" id="mcard">

                    <div class="card-header bg-transparent border-bottom-0">

                        <button (click)=" hide()" type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <owl-carousel-o [class.owl-refreshed]="refresh" [options]="customOptions" #owlElement>
                        <ng-container *ngFor="let img of slidesstore">
                            <ng-template carouselSlide [id]="img.id">
                                <img style="height: 260px;width:100%;object-fit: cover;"
                                    src='{{"assets/images/" + img.image}}' [alt]="img.name" [title]="img.name"
                                    data-hash="five" />
                                <div class="card-body">
                                    <p>{{img.id}}</p>
                                    <h5 class="card-title">{{img.name}} </h5>
                                    <p class="card-text">{{img.description}}</p>
                                </div>
                            </ng-template>
                        </ng-container>
                    </owl-carousel-o>
                </div>

            </div>
        </div>
    </div>
</div>

Angular 代码:

@ViewChild('owlElement', {static: true}) owlElement: CarouselComponent;
 customOptions: OwlOptions = {
   
      loop: false,
      mouseDrag: true,
      touchDrag: true,
      pullDrag: false,
      dots: false,
      navSpeed: 700,
      navText: ['&#8249', '›'],
      responsive: {
        0: {
          items: 1,
        },
        400: {
          items: 1,
        },
        740: {
          items: 1,
        },
        940: {
          items: 1,
        }
      },
      nav: true
    }

 show(id: number) {
    this.owlElement.to(id + "");
    this.owlElement.options = this.customOptions;
    this.refresh = true;
 }

谁能告诉我为什么会这样？我该如何解决这个问题？

我在 CodeSandBox 中附加了代码.我是 codesandbox 的新手，所以我不知道如何在 angular.cli 中添加 jquery.min.js、popper.min.js 和 bootstrap.min.js。我在其中添加了依赖项。也不知道如何添加 appRoutingModule所以我在 app.component.ts 中添加了代码，但在原始项目中它位于 home 组件中。

不胜感激。

提前致谢。

Answer 1

替代方案:您可以使用 Angular Bootstrap 实现相同的效果(模态框内的轮播)的模式和轮播:

HTML:

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-slide-show">Slide Show</h4>
    <button
      type="button"
      class="close"
      aria-label="Close"
      (click)="modal.close()"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <ngb-carousel *ngIf="slidesStore" [activeId]="activeSlideId">
      <ng-container *ngFor="let slide of slidesStore">
        <ng-template ngbSlide [id]="slide.id">
          <img
            src="{{ 'assets/images/' + slide.image }}"
            [alt]="slide.name"
            [title]="slide.name"
            style="height: 200px; width: 100%; object-fit: cover"
          />
          <div class="card-body text-center">
            <p>{{ slide.id }}</p>
            <h5 class="card-title">{{ slide.name }}</h5>
            <p class="card-text">{{ slide.description }}</p>
          </div>
        </ng-template>
      </ng-container>
    </ngb-carousel>
  </div>
</ng-template>

组件:

constructor(private modalService: NgbModal, config: NgbCarouselConfig) {
  config.showNavigationArrows = true;
  config.showNavigationIndicators = true;
  config.interval = 5000; // make it 0 to stop auto slide
  config.animation = true;
  config.keyboard = true;
}

activeSlideId = ''; // used to dynamically set the slide id

slidesStore = [
  {
    id: '39',
    name: 'Nature Photography',
    description:
      'Natural photography comprises of pictures ...',
    image: '1613460415834_nature-photography.jpg',
    createdAt: 1613730219987,
    views: 165,
  },
  ...
]

show(id: number | string, i: number) {
  this.openModal(this.content);
  this.activeSlideId = id + ''; // set active slide id to start from
}

有关更多详细信息和选项，请查看 Modal和 Carousel .