'Swiper not rendering in iOS

I am trying to understand what went wrong but couldn't figure out. The swiper just not rendering in iOS Simulator once I am using ngFor loop.

I am writing with the latest Ionic Angular + Capacitor.

On the left is rendered in Ionic Serve, on the right is in iOS Simulator. Here's my code in the page.ts

import { SwiperOptions } from 'swiper';
import { SwiperComponent } from 'swiper/angular';
import SwiperCore, { Pagination, EffectFade } from 'swiper';
SwiperCore.use([Pagination]);

config: SwiperOptions = {
    pagination: true,
  }

And here's the template

<swiper [config]="config">
        <ng-template swiperSlide *ngFor="let room of rooms" >
          <ion-card>
            <ion-card-header>
              <ion-card-subtitle>{{room.title.rendered}}</ion-card-subtitle>
              <ion-card-title color="primary">{{room.acf.room_no}}</ion-card-title>
            </ion-card-header>
            <ion-card-content>
              <ion-item lines="none" class="ion-no-padding">
                <ion-chip color="success" slot="end"><ion-label>Active</ion-label></ion-chip>
                <ion-label color="medium">Occupied till {{room.acf.next_available_date}}</ion-label>
              </ion-item>
            </ion-card-content>
          </ion-card>
        </ng-template>
      </swiper>

The weirdest part is once *ngFor is removed and ng-template slides are created individually, it works.

Hoping someone to guide me out. Thanks!

Solution 1:^[1]

Read through the log in iOS and realized it's due to CORS issues.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Calvin Seng

'Swiper not rendering in iOS

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]