在 md-table md-row 中使用渲染器有条件地添加 css class 不起作用
conditionally adding css class using renderer in md-table md-row is not working
我正在尝试使用 Renderer 在 md-table
的 md-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');
}
}
});
我正在尝试使用 Renderer 在 md-table
的 md-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');
}
}
});