[英]Change ion-col breakpoint in *ngFor
Hello i want to change the ion-col breakpoint and width while i display rows from my db.您好,我想在显示数据库中的行时更改 ion-col 断点和宽度。
I want rows with item.type= 'B' to be col-12 but rows with item.type A,C,D to be col-6.我希望 item.type= 'B' 的行为 col-12,但 item.type A、C、D 的行为 col-6。 Any idea?任何的想法?
<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>
you can achieve this using size attribute in ionic 4.您可以使用 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>
refrence https://ionicframework.com/docs/layout/grid#all-breakpoints参考https://ionicframework.com/docs/layout/grid#all-breakpoints
for ionic 3 you can use this code对于离子 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>
You can use this technique:您可以使用此技术:
If you read through you will see something called the else block:如果你通读一遍,你会看到一个叫做 else 块的东西:
<div class="hero-list" *ngIf="heroes else loading">
...
</div>
<ng-template #loading>
<div>Loading...</div>
</ng-template>
So in your case it would be所以在你的情况下它会是
<div *ngIf="item.type=='B' else sixRow">
...
</div>
<ng-template #sixRow>
...
</ng-template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.