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

Question

我已经使用ngFor将列添加到表中。 当用户单击<td>它将打开一个对话框，并返回一些值。 基于选定的值，它使用Renderer2更改特定<td>的背景颜色。基于返回的值，我也想更改其他<td>的颜色。 返回的值包含我要进行更改的<td>的item对象。 我该如何实现？

<td 
   *ngFor="let item of items; index as i"
   (click)="openDialog(someVal)"
    #someVal
>

Component.ts

  openDialog(someVal): void {

      // Some Conditions .................

       this.rd.setStyle(someVar, 'background-color', this.colorCode);
    });
  }

Answer 1

您可以使用Directive：您可以定义自己的指令以将行为附加到DOM中的<td>元素。

<td [dialog]="someVal"
*ngFor="let item of items; index as i"
 >

类

 import { fromEvent  } from 'rxjs';

 @Directive({
 selector: '[dialog]'
 })
 export class DialogDirective{

 public action: ElementRef ;

  constructor( elementRef: ElementRef<HTMLElement>) {
  this.action = elementRef ;
  }

 @Input() set dialog( someVal : any ) {

 // Some Conditions ...

 // Subscription
 fromEvent(this.action.nativeElement, 'click').pipe(
  .....

 }