时间戳

首页 > 解决方案 > ionic - 幻灯片中的离子网格，响应不工作

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

问题描述

我对幻灯片中的离子网格有疑问。我有放置在 ion-grid 上的产品项目，并且 ion-grid 在幻灯片内，然后如果我旋转我的 android 设备，ion-grid 没有响应，所以图像被切断

<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>

如果我移除了 ion-slides，则 ion-grid 会正确响应，因此图像不会被截断。如何解决这个问题？谢谢你

标签： ionic-frameworkionic4

解决方案

你可以在 component.ts 中给出这个

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

推荐阅读