我在使用 Swiper 时遇到了一些麻烦。当我将原始数据加载到 Swipe 时,组件会滑动。但是,如果我要从 API 中提取数据,则组件不会滑动,直到视图发生更改:例如如果我要更改窗口的大小或单击 Inspect 元素。我无法弄清楚是否与事件循环和视图有关,或者是否与 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>
                    <on *ngIf="event.url"mat-raised-on color="basic">
                      <a href="{{event.url}}" class="btn btn-default">Buy Ticket</a>
                    </on>
                </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: SwiperConfigIntece = {
  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();
  }