css - 在 Angular 2/Ionic 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

更多详情请阅读: NgClass

---

对于动态属性使用，

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