代码之家 › 专栏 › 技术社区 › Robin

在md表md行中使用渲染器有条件地添加css类不起作用

angular-material2 nodes typescript angular javascript

0

Robin · 技术社区 · 8 年前

我正在尝试添加css类 md-row md-table

这是我的密码。

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>

1 回复 | 直到 8 年前

1

0

Robin 8 年前

我在复选框选择函数中添加了remove class函数,以在选中时清理以前的css类,但angular会检测到更改并在每次更改时启动此函数,因此如果我在上下文单击时添加css类,它会在上下文单击事件中应用一次,但在angular检测更改时会从复选框函数中删除。

在checkbox函数中,我添加了这一行

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

每次运行角度变化检测器时都会触发remove类,因此我的add类在上下文单击后立即应用,然后被删除。我删除了这行并用此进行重构:

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