时间戳

首页 > 解决方案 > 更改 *ngFor 中的 ion-col 断点

ionic-framework - 更改 *ngFor 中的 ion-col 断点

问题描述

您好，我想在显示数据库中的行时更改 ion-col 断点和宽度。

我希望 item.type= 'B' 的行为 col-12，但 item.type A、C、D 的行为 col-6。任何想法？

      <ion-grid>
            <ion-row>
                <ion-col col-6 *ngFor="let item of items;" >
                    <ion-card>
                        <ion-card-content>
                            <div *ngIf="item.type==='A'">
                                some data
                            </div>
                            <div *ngIf="item.type==='B'">
                                some data 2
                            </div>
                            <div *ngIf="item.type==='C'">
                                some data 3
                            </div>
                            <div *ngIf="item.type==='D'">
                                some data 4
                            </div>
                        </ion-card-content>
                    </ion-card>
                </ion-col>
            </ion-row>
        </ion-grid>

标签： ionic-frameworkionic3

解决方案

您可以使用 ionic 4 中的 size 属性来实现这一点。

 <ion-col *ngFor="let item of items;" [size]="item.type == 'B' ? 12 : 6 ">
                <ion-card>
                    <ion-card-content>
                        <div *ngIf="item.type==='A'">
                            some data
                        </div>
                        <div *ngIf="item.type==='B'">
                            some data 2
                        </div>
                        <div *ngIf="item.type==='C'">
                            some data 3
                        </div>
                        <div *ngIf="item.type==='D'">
                            some data 4
                        </div>
                    </ion-card-content>
                </ion-card>
 </ion-col>

参考https://ionicframework.com/docs/layout/grid#all-breakpoints

对于离子 3，您可以使用此代码

<ion-grid>
    <ion-row *ngFor="let item of items;">
      <ng-container *ngIf="item.type == 'B'">
          <ion-col col-12 >
              <ion-card>
                  <ion-card-content>
                      <div *ngIf="item.type==='A'">
                          some data
                      </div>
                      <div *ngIf="item.type==='B'">
                          some data 2
                      </div>
                      <div *ngIf="item.type==='C'">
                          some data 3
                      </div>
                      <div *ngIf="item.type==='D'">
                          some data 4
                      </div>
                  </ion-card-content>
              </ion-card>
          </ion-col>
      </ng-container>
      <ng-container *ngIf="item.type != 'B'">
          <ion-col col-6 >
              <ion-card>
                  <ion-card-content>
                      <div *ngIf="item.type==='A'">
                          some data
                      </div>
                      <div *ngIf="item.type==='B'">
                          some data 2
                      </div>
                      <div *ngIf="item.type==='C'">
                          some data 3
                      </div>
                      <div *ngIf="item.type==='D'">
                          some data 4
                      </div>
                  </ion-card-content>
              </ion-card>
          </ion-col>
      </ng-container>
    </ion-row>
</ion-grid>

推荐阅读