在 md-table md-row 中使用渲染器有条件地添加 css class 不起作用

conditionally adding css class using renderer in md-table md-row is not working

我正在尝试使用 Renderer 在 md-tablemd-row 中添加 css class,但它从未被应用。

这是我的代码。

constructor( private renderer: Renderer ) { }

onContextMenuClick(e: Event){
 // do something...
 // add css class based on condition
 this.renderer.setElementClass(e.currentTarget, 'selected', true);
  
  
}

<md-row  *cdkRowDef="let row; columns: displayedColumns;" 
  [ngClass]="uniqueRow(row.id)" // To update/remove row by the unique Id
         (contextmenu)="onContextMenuClick($event,row.id)" // Do something on contextmenu click
         [class.checkbox-selected]="selection.isSelected(row.id)"> // add selected css class on check box checked.
</md-row>

它是 angular 变化检测器。 我在复选框选择功能中添加了删除 class 功能,以在选中时清除之前的 css classes,但是 angular 检测到更改并在每次更改,所以如果我在上下文单击时添加 css class,它会在上下文单击事件上应用一次,然后在 angular 检测到更改时从复选框函数中删除。

我在复选框函数中添加了这一行

$('md-row').removeClass('selected')

在视图中

<md-checkbox  color="primary"  
              (click)="$event.stopPropagation()" 
              (change)="$event ? selection.toggle(row.id) : null" 
              [checked]="selection.isSelected(row.id)">
</md-checkbox>

删除 class 每次运行 angular 更改检测器时都会触发,因此我在上下文单击后添加 class 立即应用然后删除。我删除了这一行 $('md-row').removeClass('selected') 并重构为:

this.selection.onChange.takeUntil(this.unsubscribe$).subscribe(d => {
        if (this.selection.selected.length > 0) {
            // clean  onContext css classes.
            let elems = document.getElementsByTagName('md-row');
            for (let i = 0, len = elems.length; i < len; i++) {
                let classes = elems[i].classList;
                if (classes.contains('selected'))
                    classes.remove('selected');
        }  
     }
});