Как использовать модули в Angular 7 для условного связывания значения класса или атрибута в цикле ngFor?

Question

Используя ngFor для обхода массива элементов, я хочу, чтобы элементы с индексом EVEN имели цвет фона, отличный от элементов с индексом ODD. я смог добиться этого в VueJs, используя код ниже:

Я пробовал приведенный ниже угловой код, безуспешно:

 <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, но мне нужно добиться этой же логики в Angular 7

<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

Что-то в этом роде? 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;
}

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

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

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