如何获取被用作ngx-datatable中的ngx-datatable-cell-template的div的scrollWidth和offSetWidth

Question

我想获取我在一个子组件中拥有的div的scrollWidth和offSetWidth，并且我正在将子组件作为ngx-datatable-cell-template加载到ngx-datatable中。我总是将值设为0

我为div元素添加了模板变量，并使用ViewChild在组件中创建了一个变量。我试图从ngAfterViewInit方法获取值。 variable.nativeElement.offsetWidth始终为0。我正在子组件中完成所有这些操作。

有人知道为什么总是给出0值吗？

Answer 1

我做了两件事来解决这个问题

1. 我在ngAfterViewInit方法中使用了setTimeOut。我从setTimeOut的内部读取UI元素的offsetWidth和scrollWidth。超时时间为0。

this.commentsDiv.nativeElement.offsetWidth
this.commentsDiv.nativeElement.scrollWidth

当我尝试读取setTimeOut之外的值时，我只会得到0。因为ngx-DataTable渲染仍在进行。 setTimeOut仅在可用/渲染语句后才执行。

1. 当我们更新ngx-datatable的内容时，该表只会更新行的内容，并且不会重新创建它们。

例如，网格上已经有两行。现在，我们用三个记录更新网格。该表将使用新记录更新现有的两个记录。在这种情况下，对于这些记录，基础子组件的“ ngOnInit和ngAfterViewInit”将不会被触发。如果要基于新内容更改这些行上的任何内容，则需要借助“ ngOnChanges和” ngAfterViewChecked / ngAfterContentChecked”来进行。

当我们使用ngAfterViewChecked / ngAfterContentChecked时，我们需要小心，因为即使我们将鼠标悬停在上面，它们也会被触发。

对于第三新行，表将创建新行，基础子组件将触发“ ngOnInit和ngAfterViewInit”