如何使用 Angular 7 中的模块在 ngFor 循环中有条件地绑定 class 或属性值？

Question

使用 ngFor 遍历项目数组，我希望具有 EVEN 索引的项目与具有 ODD 索引的项目具有不同的背景颜色。我能够使用下面的代码在 VueJs 中实现这一点：

我试过下面的Angular代码，没有成功：

 <ion-col  *ngFor="let item of [].constructor(50); let i = index" >

               <ion-card [attr.color]="{'secondary': i % 2, 'primary': !(i % 2)}">

</ion-card>
</ion-col>

VueJs 代码：这段代码在 VueJs 中对我有用，但我需要在 Angular7

中实现相同的逻辑

<div v-for="(itemforsale, index) in filteredListMainitemsforsale">

<div :class="{'box bg-success text-center': index % 2, 'box bg-info text-center': !(index % 2)}" >


</div>

</div>

Answer 1

<ion-col  *ngFor="let item of [].constructor(50); let i = index" >
  <ion-card [style.color]="i % 2 === 0 ? 'secondary' : 'primary'">

  </ion-card>
</ion-col>

Answer 2

这样试试：

<ion-card [style.color]="i % 2?'secondary': 'primary'">

背景颜色：

 <ion-card [style.background-color]="i % 2?'secondary': 'primary'">

Answer 3

你可以这样试试

<ion-col  *ngFor="let item of [].constructor(50); let i = index" >
     <ion-card [ngStyle]="{'color': i % 2 == 0 ? 'secondary' : 'primary'}">
     </ion-card>
</ion-col>

Answer 4

类似的东西？ https://stackblitz.com/edit/angular-fia7hx

<div *ngFor="let item of [1,2,3,4,5,6,7,8,9]; index as i">
    <p  [ngClass]="{greyClass: i%2 === 0}">
      {{item}}
    </p>
</div>

.greyClass {
    background-color: grey;
}

如何使用 Angular 7 中的模块在 ngFor 循环中有条件地绑定 class 或属性值？

How to use Modules in Angular 7 to conditionally bind a class or attribute value in ngFor loop?

angular-template

angular