Ionic 3如何根据条件动态修改ion-col属性实现网格适配？

这问题在Ionic+Angular开发里挺常见的，咱们可以借助Angular的属性绑定和条件渲染轻松实现需求，下面给你几个实用的实现方式：

方式一：直接用三元表达式动态绑定col属性 #

这种方式最简洁，直接在模板里通过条件判断计算每列的宽度：

<ion-row>
  <!-- 第一列根据Data2、Data3的存在情况动态调整宽度 -->
  <ion-col [col]="!Data2 && !Data3 ? 12 : (!Data3 ? 6 : 4)">
    {{Data1}}
  </ion-col>
  <!-- 第二列仅在Data2有值时渲染，宽度随Data3是否存在变化 -->
  <ion-col *ngIf="Data2" [col]="!Data3 ? 6 : 4">
    {{Data2}}
  </ion-col>
  <!-- 第三列仅在Data3有值时渲染，固定占4格 -->
  <ion-col *ngIf="Data3" col-4>
    {{Data3}}
  </ion-col>
</ion-row>

逻辑说明： #

• 当Data2和Data3都无值时，第一列占满整行（col-12）
• 只有Data3无值时，前两列各占一半（col-6）
• 三个数据都有值时，每列各占1/3（col-4）

方式二：用ngClass绑定类名（逻辑更清晰） #

如果条件复杂，用ngClass把不同场景的类名明确列出来，可读性更好：

<ion-row>
  <ion-col [ngClass]="{
    'col-12': !Data2 && !Data3,
    'col-6': (Data2 && !Data3),
    'col-4': Data2 && Data3
  }">
    {{Data1}}
  </ion-col>
  <ion-col *ngIf="Data2" [ngClass]="{'col-6': !Data3, 'col-4': Data3}">
    {{Data2}}
  </ion-col>
  <ion-col *ngIf="Data3" class="col-4">
    {{Data3}}
  </ion-col>
</ion-row>

进阶优化：严谨判断“无值”场景 #

上面的例子里用!Data2判断无值，但如果你的“无值”包含空字符串（比如Data2=''），这个判断就不准确了。可以在组件的.ts文件里写一个工具方法来统一判断：

// 组件类中添加方法
hasValue(data: any): boolean {
  // 排除null、undefined，以及空字符串（去空格后）
  return data !== null && data !== undefined && (typeof data !== 'string' || data.trim() !== '');
}

然后在模板里用这个方法替代直接判断：

<ion-row>
  <ion-col [col]="!hasValue(Data2) && !hasValue(Data3) ? 12 : (!hasValue(Data3) ? 6 : 4)">
    {{Data1}}
  </ion-col>
  <ion-col *ngIf="hasValue(Data2)" [col]="!hasValue(Data3) ? 6 : 4">
    {{Data2}}
  </ion-col>
  <ion-col *ngIf="hasValue(Data3)" col-4>
    {{Data3}}
  </ion-col>
</ion-row>

这样就能准确处理各种“无值”的情况啦～

内容的提问来源于stack exchange，提问作者Gitaram Kanawade