[英]Angular 6 Change Styles Using Renderer2 of a different column within ngFor
I have added columns to a table using ngFor. 我已经使用ngFor将列添加到表中。 when user clicks on <td>
it opens a Dialog box and it return some values. 当用户单击<td>
它将打开一个对话框,并返回一些值。 Based on selected values it changes the background-color of that particular <td>
using Renderer2 .Based on that returned values I want to change the color of some other <td>
as well. 基于选定的值,它使用Renderer2更改特定<td>
的背景颜色。基于返回的值,我也想更改其他<td>
的颜色。 Returned values has the item
objects of <td>
s that I want to make the changes. 返回的值包含我要进行更改的<td>
的item
对象。 How can I achieve that? 我该如何实现?
<td
*ngFor="let item of items; index as i"
(click)="openDialog(someVal)"
#someVal
>
Component.ts Component.ts
openDialog(someVal): void {
// Some Conditions .................
this.rd.setStyle(someVar, 'background-color', this.colorCode);
});
}
You can use Directive : You can define your own directives to attach behavior to <td>
element in the DOM. 您可以使用Directive:您可以定义自己的指令以将行为附加到DOM中的<td>
元素。
<td [dialog]="someVal"
*ngFor="let item of items; index as i"
>
Class 类
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(
.....
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.