Блог

Я использую <owl-carousel-o> модель с начальной загрузкой.

здесь проблема, как показано ниже

При нажатии на изображение модель будет открыта, но данные не отображаются должным образом в первый раз после нажатия 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">amp;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>
 

Угловой код:

 @ViewChild('owlElement', {static: true}) owlElement: CarouselComponent;
 customOptions: OwlOptions = {
   
      loop: false,
      mouseDrag: true,
      touchDrag: true,
      pullDrag: false,
      dots: false,
      navSpeed: 700,
      navText: ['amp;#8249', 'amp;#8250;'],
      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, поэтому понятия не имею, как добавить jquery.min.js , popper.min.js и bootstrap.min.js в angular.cli. Я добавил в нее зависимость. а также не знаю, как добавить appRoutingModule , поэтому я добавил код в app.component.ts, но в оригинальном проекте он находится внутри домашнего компонента.

Ответ был бы оценен.

Заранее спасибо.

Альтернатива: вы можете добиться того же (Carousel внутри модального), используя модальные и карусельные функции 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">amp;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.