Условный синтаксис для альтернативного <li>в Angular

Question

Я пытаюсь вывести результаты этого кода, и все работает, за исключением того факта, что альтернативные li не отображаются в запрошенных цветах:

<ul class="list-group "> 
  <li class="list-group-item" *ngFor="let item of items; let i = index" ng-style="{'backgroundColor': (i % 2 === 0) ? 'red':'blue'}"> {{ item }} </li> 
</ul>

Он должен отображать альтернативные li красный или синий, но не применяется условие

Answer 1

Вам необходимо использовать [ngStyle] в Angular вместе с even локальной переменной .

<ul class="list-group "> 
  <li class="list-group-item" *ngFor="let item of items; let even=even" [ngStyle]="{'background-color': even ? 'red':'blue'}"> {{ item }} </li> 
</ul>

Answer 2

Измените его на как показано ниже

<ul class="list-group "> 
  <ng-container *ngFor="let item of items; let i = index">
  <li class="list-group-item"  [ngStyle]="{'background-color': (i % 2 === 0) ? 'red':'blue'}"> {{ item }} </li> 
</ng-container>
</ul>

Answer 3

у вас есть опечатка в вашем стиле (background-color не backgroundColor, а в angular это ngStyle, а не ng-style, но ngFor предоставляет некоторые полезные переменные шаблона, такие как нечетные и четные:

<li class="list-group-item" *ngFor="let item of items; let even" [ngStyle]="{'background-color': even ? 'red':'blue'}"> {{ item }} </li>