Swiper No Swiping

Question

SwiperNoSwiping.mov

https://swiperjs.com/

У меня возникли некоторые проблемы при использовании Swiper. Когда я загружаю необработанные данные в Swipe, компонент смахивает. Однако, если бы мне нужно было извлечь данные из API, компонент не будет смахивать, пока не произойдет изменение в представлении: например, если бы мне пришлось изменить размер окна или щелкнуть элемент Inspect. Я не могу понять, связано ли это с событием l oop и представлением, или если оно как-то связано с CSS.

. Я предоставил ссылку на видео, чтобы вы могли увидеть, что Я говорю.

Мой код:

event.component. html

<swiper fxFlex="auto" [config]="config">
    <div *ngFor="let event of totalEvents" class="swiper-slide cursor-pointer">
        <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
            <!-- Your content goes here -->
            <mat-card class="example-card">
                <mat-card-header>
                  <img src="{{event.image}}" style="max-width:30%;max-height:35%;">
                  <mat-card-title>{{event.eventName}}</mat-card-title>
                  <mat-card-subtitle>{{event.startDate}}</mat-card-subtitle>
                  <mat-card-subtitle>{{event.venue}} <br>
                    {{event.location}}</mat-card-subtitle>
                </mat-card-header>
                <mat-card-content>
                    <p>{{event.promoter}}</p>
                    <p>{{event.info}}</p>
                    <hr>
                    <p>$ {{event.price}}</p>
                    <button *ngIf="event.url"mat-raised-button color="basic">
                      <a href="{{event.url}}" class="btn btn-default">Buy Ticket</a>
                    </button>
                </mat-card-content>
              </mat-card>
          </div>
        </div>
    </swiper>
    <swiper fxFlex="auto" [config]="config">
        <div *ngFor="let step of something" class="swiper-slide cursor-pointer">
            <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
                <!-- Your content goes here -->
                <mat-card class="example-card">
                    <mat-card-header>
                      <div mat-card-avatar class="example-header-image"></div>
                      <mat-card-title>{{step.name}}</mat-card-title>
                    </mat-card-header>
                    <mat-card-content>
                      <p>
                        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
                        A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
                        bred for hunting.
                      </p>
                    </mat-card-content>
                  </mat-card>
            </div>
        </div>
    </swiper>

event.component.ts

 totalEvents: any = [];
  something = [{
    name: 'Test1'
  },
  {
    name: 'Test2'
  }
];

  /* cardSwipe */
  index;
  config: SwiperConfigInterface = {
  effect: 'slide',
  a11y: true,
  direction: 'horizontal',
  slidesPerView: 3,
  slideToClickedSlide: true,
  mousewheel: true,
  scrollbar: true,
  watchSlidesProgress: true,
  navigation: true,
  keyboard: true,
  pagination: false,
  centeredSlides: true,
  loop: true,
  roundLengths: true,
  slidesOffsetBefore: 100,
  slidesOffsetAfter: 100,
  spaceBetween: 50,
  breakpoints: {
      // when window width is >= 320px
      320: {
          slidesPerView: 1
      }
  }
};

  ngOnInit() {
    this.fetchEvents();
  }