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

Используя 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>

просто используйте четное и нечетное свойство css

Kamil Naja 05.06.2019 08:08

вы можете использовать в *ngFor "let event=even" см. angular.io/api/common/NgForOf и ngClass [ngClass] = "{even? 'text-center box bg-success':'text-center bg-info'}" или [ngClass] = "{'text-center box bg-success':even,'text-center bg-info'}:!even"

Eliseo 05.06.2019 08:26
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
2
103
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Попробуйте так:

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

Для цвета фона:

 <ion-card [style.background-color] = "i % 2?'secondary': 'primary'">
Ответ принят как подходящий

вы можете попробовать вот так

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

Что-то такое? 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;
}

Другие вопросы по теме