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

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

angular-material2 nodes typescript angular javascript

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 年前

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

推荐文章

Rubyen · 同一行上的角度材质多个“输入”

7 年前

John Earl · Travis CI使用有角材质失败

7 年前

user1893354 · Angular2材质选择下拉列表打开后不会关闭

7 年前

Sergio Lopez · 带材质自动完成的角度5

7 年前

cdv · 如何使用模式验证mat日期选择器输入?

7 年前

Pablo De Luca · 角度材质2-手动将字段/控件设置为无效

7 年前

userx · 无法识别角材料模块

7 年前

A T · 带角度材质的垂直选项卡

7 年前

user9557542 · 角度材质图标不工作

7 年前

Vik · 在html文件中引用常量的角度材质

7 年前