Angular 6在ngFor中使用不同列的Renderer2更改样式

import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) { }

<div *ngFor="let item of items; let i = index" [attr.data-index]="i">
  {{ item }}
</div>

@ViewChild('itemList') itemList: ElementRef;

ngAfterViewInit() {
  const elements = this.itemList.nativeElement.children;
  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    const index = element.getAttribute('data-index');
    if (index % 2 === 0) {
      this.renderer.setStyle(element, 'background-color', 'lightgray');
    } else {
      this.renderer.setStyle(element, 'background-color', 'white');
    }
  }
}