Реализация ngClassEven ngClassOdd для угловых 2

Question

Я попытался реализовать поведение типа ng-class-even и ng-class-odd (от angular 1) в приложении angular 2.

Я написал код ниже, и он работает нормально, я хочу знать, есть ли другой способ сделать это.

HTML

<div *ngFor="#employee of employees; #index = index" [class.odd]="index%2==1" [class.even]="index%2==0" [class.selected]="employee === selectedEmployee"> 
      <p>{{employee.name}}</p>
         </div>

CSS

.odd {
    background-color: #f2f9ff;

}
.even {
    background-color: #eceff3;
}

Answer 1

СТАРЫЙ путь

ДЕМО: http://plnkr.co/edit/YkcudQipF1c8iT5LCRyd?p=preview

<div *ngFor="#employee of employees; 
             #index =index;
             #isOdd=odd;
             #isEven=even" 

     [class.odd]="isOdd" 
     [class.even]="isEven" 
     [class.selected]="employee === selectedEmployee"> 
     <p>{{employee.name}}</p>
</div>

---

Новый способ

замещать # от let (ключевое слово)

<div *ngFor="let employee of employees; 
             let index =index;
             let isOdd=odd;
             let isEven=even" 

      [class.odd]="isOdd" 
      [class.even]="isEven" 
      [class.selected]="employee === selectedEmployee"> 
      <p>{{employee.name}}</p>

</div>

Answer 2

обновление (Angular4)

<div *ngFor="let employee of employees; index as i; odd as isOdd; even as isEven" 

оригинал (Angular2)

Это должно работать:

<div *ngFor="let employee of employees; let index = index; let isOdd=odd; let isEven=even" 
    [class.Odd]="isOdd" 
    [class.even]="isEven" 
    [class.selected]="employee === selectedEmployee"> 
      <p>{{employee.name}}</p>
         </div>

NgFor предоставляет несколько экспортируемых значений, которые можно связать с локальными переменными:

• index будет установлен на текущую итерацию цикла для каждого контекста шаблона.
• first будет установлено логическое значение, указывающее, является ли элемент первым в итерации. (начиная с бета.15)
• last будет установлено логическое значение, указывающее, является ли элемент последним в итерации.
• even будет установлено логическое значение, указывающее, имеет ли этот элемент четный индекс.
• odd будет установлено логическое значение, указывающее, имеет ли этот элемент нечетный индекс.

Plunker

Смотрите также https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

Answer 3

<div *ngFor="#employee of employees; #index = index;#isOdd=odd;#isEven=even" 
    [class.Odd]="isOdd" 
    [class.even]="isEven" 
    [class.selected]="employee === selectedEmployee"> 
      <p>{{employee.name}}</p>
         </div>

Приведенный выше код работал нормально.

Спасибо Гюнтер, микроникс.