Question

在以下代码中，有时{{Data3}}或{{Data2}}将没有任何值

情景1：{{Data3}}没有任何价值

 <ion-row>
    <ion-col col-4>{{Data1}}</ion-col>
    <ion-col col-4>{{Data2}}</ion-col>
    <ion-col col-4 >{{Data3}}</ion-col>
 </ion-row>

现在我需要将前两个col更改为两个网格
类似的东西：

<ion-row>
    <ion-col col-6>{{Data1}}</ion-col>
    <ion-col col-6>{{Data2}}</ion-col>
 </ion-row>

情景2：{{Data3}}和{{Data2}}没有任何价值

 <ion-row>
    <ion-col col-4>{{Data1}}</ion-col>
    <ion-col col-4>{{Data2}}</ion-col>
    <ion-col col-4 >{{Data3}}</ion-col>
 </ion-row>

现在我需要将前两个col更改为一个网格
类似的东西：

<ion-row>
    <ion-col col-12>{{Data1}}</ion-col>
 </ion-row>

如何在特定条件下动态更改<ion-col>的属性。

Answer 1

从您想要列的内容宽度相等的网格default behavior。

默认情况下，对于所有设备和屏幕尺寸，列将在行内占据相同的宽度。

如果数据不存在，您真正需要做的就是没有列。

<ion-row>
    <ion-col *ngIf="Data1">{{Data1}}</ion-col>
    <ion-col  *ngIf="Data2">{{Data2}}</ion-col>
    <ion-col  *ngIf="Data3">{{Data3}}</ion-col>
 </ion-row>

Answer 2

得到解决方案[attr.col-4] =＆＃34; condition1＆＃34; [attr.col-6] =＆＃34;条件2＆＃34;像

<ion-col *ngIf="Data1" [attr.col-4]="condition1" [attr.col-6]="condition2">{{Data1}}</ion-col>
<ion-col  *ngIf="Data2" [attr.col-4]="condition1" [attr.col-6]="condition2">{{Data2}}</ion-col>
<ion-col  *ngIf="Data3" [attr.col-4]="condition1" [attr.col-6]="condition2">{{Data3}}</ion-col>

Answer 3

我希望这段代码能帮助您制作动态彩色图片

<ion-col *ngFor="let button of data.buttons.list;"
    [attr.col-1]="data.buttons.col == 1 ? '' : null"
    [attr.col-2]="data.buttons.col == 2 ? '' : null"
    [attr.col-3]="data.buttons.col == 3 ? '' : null"
    [attr.col-4]="data.buttons.col == 4 ? '' : null"
    [attr.col-6]="data.buttons.col == 6 ? '' : null"
    [attr.col-12]="data.buttons.col == 12 ? '' : null"
>

ionic 3动态更改网格

3 个答案: