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

Angular 6中，可以使用Renderer2来更改ngFor中不同列的样式。Renderer2是Angular提供的一个服务，用于操作DOM元素。

在ngFor中使用不同列的Renderer2更改样式的步骤如下：

首先，导入Renderer2服务：

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

在组件的构造函数中注入Renderer2：

constructor(private renderer: Renderer2) { }

在模板中，使用ngFor指令遍历数据，并为每个元素创建一个唯一的标识符：

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

在组件中，使用@ViewChild装饰器获取ngFor生成的元素列表：

@ViewChild('itemList') itemList: ElementRef;

在ngAfterViewInit生命周期钩子函数中，使用Renderer2来更改样式：

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');
    }
  }
}

在上述代码中，我们首先通过nativeElement获取到ngFor生成的元素列表，然后使用Renderer2的setStyle方法来更改元素的样式。根据元素的索引，我们可以判断奇偶行，并为奇数行和偶数行设置不同的背景颜色。

这是一个简单的示例，你可以根据实际需求进行更复杂的样式更改操作。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。