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

【问题标题】：conditionally adding css class using renderer in md-table md-row is not working在 md-table md-row 中使用渲染器有条件地添加 css 类不起作用
【发布时间】：2017-07-23 14:45:03
【问题描述】：

我正在尝试使用 Renderer 在 md-row 的 md-table 中添加 css 类，但它从未得到应用。

这是我的代码。

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>

【问题讨论】：

您遇到的错误是什么？你可以为它重新创建一个 plunker 吗？你能用 elementRef 试试同样的方法吗
此外，您似乎正在将参数重载到onContextMenuClick。这会引发错误吗？
嗯，谢谢，它现在正在工作。我已删除该参数以仅显示受影响的部分。
如果你解决了它，你应该在答案中发布你自己的解决方案......读作没有答案......

标签： javascript angular typescript nodes angular-material2

【解决方案1】：

它是角度变化检测器。我在复选框选择函数中添加了删除类函数，以在选中时清理以前的 css 类，但是 angular 会检测更改并在每次更改时触发此函数，因此如果我在上下文单击时添加 css 类，它会在上下文中应用一次点击事件，但是当角度检测变化时，它会从复选框功能中删除。

在复选框功能中我添加了这一行

$('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>

每次角度变化检测器运行时都会触发删除类，因此我在上下文单击后立即应用添加类，然后将其删除。我删除了这一行 $('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');
        }  
     }
});

【讨论】：