首页 文章

在Angular 2 / Ionic 2中给出条件右对齐列

提问于
浏览 次
1

我想通过应用 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 吗？

css angular ionic-framework ionic2

2 回答

  • 3

    不需要 *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'
    回复于
  • 1

    你可以使用这样的东西

    什么时候：

    <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>
    回复于

相关问题