ionic - 幻灯片中的离子网格，响应不起作用

Question

我对幻灯片中的离子网格有疑问。我有一些产品放在离子网格上，离子网格在幻灯片中，然后如果我旋转我的 android 设备，离子网格没有响应，因此图像被切断

<ion-col class="hide-xs" size-sm="7" >
    <ion-slides >
       <ion-slide *ngFor="let products of listProduct" >
        <app-ajax [ajax]="ajax"></app-ajax>

        <ion-grid>
          <ion-row>
            <ion-col size="6" sizeMd="4" sizeXl="3" *ngFor="let item of products">
              <div class="image-container" *ngIf="item.photo!==''">
                <ion-img *ngIf="item.idproduct !==0" width="100%" height="100%"
                  [src]="'data:image/jpeg;base64,' + item.foto64" (click)="presentModal(item)"></ion-img>
              </div>
            
              <div class="fontImage" (click)="presentModal(item)">{{item.nmproduct}}</div>
            </ion-col>    
          </ion-row>
        </ion-grid>
      </ion-slide>
    </ion-slides>
  </ion-col>

如果我移除了离子载玻片，离子网格响应正常，所以图像不会被切断。如何解决这个问题？谢谢

Answer 1

你可以在 component.ts

中给出这个

 @ViewChild('slides',{static: true}) slides;
 @HostListener('window:resize')
  onResize() {
  setTimeout(() => this.slides.update(), 50);
 }

ionic - 幻灯片中的离子网格，响应不起作用

ionic - ion-grid within slides, responsive is not working

ionic-framework

ionic4