角2/离子2中给定条件的右对齐柱

Question

当justify-content-end和text-right匹配每个记录的某些条件时，我想有选择地对某些列进行对齐，这样呈现的版本如下所示：

<ion-content padding>

  <ion-grid>
    <ion-row>
      <ion-col col-8>Stuff</ion-col>
    </ion-row>
    <ion-row justify-content-end text-right>
      <ion-col col-8>Stuff 2</ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-8>Stuff 3</ion-col>
    </ion-row>
    <ion-row justify-content-end text-right>
      <ion-col col-8>Stuff 4</ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

我怎么能把它写进代码里呢？我需要以某种方式使用*ngIf吗？

Answer 1

不需要*ngIf，只需要ngClass：

<ion-row [ngClass]="{'justify-content-end': true, 'text-right': false }">...</ion-row>

// OR : If both classes have same conditions

<ion-row [ngClass]="{'justify-content-end text-right' : true}">...</ion-row>

使用您的true / false代替conditions

有关更多详情，请参阅：NgClass

对于动态属性的使用，

[attr.justify-content-end]='true/false'

Answer 2

你可以用这样的东西

当真实：

<ion-row justify-content-end text-right *ngIf="msg.mycondition">
  <ion-col col-8>Stuff 2</ion-col>
</ion-row>
<ion-row *ngIf="!msg.mycondition">
  <ion-col col-8>Stuff 2</ion-col>
</ion-row>