Question

您好，我想更改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>

Answer 1

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

mon initial members = minisha-VirtualBox
mon host = 192.168.1.141
public network = 192.168.1.0/24
cluster network = 192.168.1.0/24
osd journal size = 100
log file = /dev/null
keyring = /etc/ceph/ceph.client.admin.keyring

引用https://ionicframework.com/docs/layout/grid#all-breakpoints

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

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

Answer 2

您可以使用此技术：

https://angular.io/api/common/NgIf

如果您通读了内容，将会看到一个名为else的块：

<div class="hero-list" *ngIf="heroes else loading">
 ...
</div>

<ng-template #loading>
 <div>Loading...</div>
</ng-template>

所以您的情况应该是

<div *ngIf="item.type=='B' else sixRow">
 ...
</div>

<ng-template #sixRow>
 ...
</ng-template>

在* ngFor中更改ion-col断点

2 个答案: