我正在网站上使用AG Grid。当用户单击一个单元格时,它会被聚焦并显示一个蓝色轮廓。 当用户在所选元素之外单击时,我需要删除此焦点。
I'm using AG Grid on a website. When the user clicks a cell, it is focused and gets a blue outline. I need to remove this focus when the user clicks outside the selected element.
const body = document.body; body.addEventListener('mouseup', (e) => { const container = thismonAgGrid.nativeElement; if (!container.contains(e.target)) { this.gridApi.clearFocusedCell(); } });但是当我在ag-grid中使用mat select组件时,这不起作用。示例-朋克
But this is not working when I am using mat select component in ag-grid. Example- plunker
请更改下拉列表的值,该值不会因此改变。
Please change the dropdown value, the value won't change because of this.
推荐答案好的,这里您需要了解以下内容:
Ok, here what you need to understand:
因此,您需要将 ViewChild -绑定到模板(自定义内部
So you need to have ViewChild - bound to your template (inside custom component)
@ViewChild('yourElementRef') public yourElementRef:ElementRef然后,将该属性 yourElementRef 绑定到模板(标签(div,表单,其他内容)应基于HTML-不是来自第三方库的指令-可能缺少cuz引用)
Then, bound this property yourElementRef to the template (tag (div, form, whatever) should be HTML based - not directive from third party libraries - cuz reference could be missed)
template: ` <mat-card> <form #yourElementRef class="container" tabindex="0" (keydown)="onKeyDown($event)"> ...再次输入# < mat-cad> 中的yourElementRef -将会丢失本机元素引用
again if you put #yourElementRef in <mat-cad> - native element reference would be missed
最后一件事是跟踪自己
ngAfterViewInit() { ... let body = document.body; body.addEventListener("mouseup", (e) => { let container = this.yourElementRef.nativeElement; if (!container.contains(e.target)){ this.params.api.clearFocusedCell(); } }) }演示
PS:这是选择重置的解决方案仅,就此示例而言-值(模型)未正确更新(因为实施错误)
P.S: this is a solution for selection reset ONLY, on exact this example - values (models) doesn't update properly (cuz it's just wrong implemented)
更多推荐
在Ag
发布评论