ionic 3 Динамическое изменение сетки

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>

Теперь мне нужно изменить первые два столбца на две сетки
Что-то вроде:

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

Теперь мне нужно изменить первые два столбца в одну сетку
Что-то вроде:

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

Как я могу динамически изменить атрибут <ion-col> при определенных условиях.

Answer 1

Получил решение [attr.col-4] = "condition1" [attr.col-6] = "condition2" Как

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

Надеюсь, этот фрагмент кода поможет вам создать динамический столбец

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

Answer 3

Из содержимого вы хотите, чтобы столбцы имели одинаковую ширину, что является поведением сетки по умолчанию .

По умолчанию столбцы будут занимать равную ширину внутри строки длявсе устройства и размеры экрана.

Что вам действительно нужно сделать, так это не иметь столбец, если данные отсутствуют.

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