无数据时datatable水平滚动条答案

【问题标题】：Datatable horizontal scroll bar when no data无数据时datatable水平滚动条
【发布时间】：2019-09-05 18:30:59
【问题描述】：

如果表中没有数据，我不会进行水平滚动。列刚刚被切断。由于表格有超过25列，如果没有数据也必须显示水平滚动条。

有数据就好。

【问题讨论】：

你找到这个问题的解决方案了吗，因为我也面临同样的问题。

标签： angular ngx-datatable

【解决方案1】：

解决方法是将 ngx-datatable 放在具有预定义宽度、高度和滚动条的 div 中，即。溢出 - 自动（在 css 类中定义，并在没有可用于 ngx-datatable 的数据的情况下有条件地使用）。

如果 ngx-datatable 本身需要，我们可能需要编写自定义代码来更改 ngx-datatable 库并在项目中使用，但这会在每次更新库时增加开销。

【讨论】：

【解决方案2】：

import { Directive, ElementRef, Renderer2, OnInit, AfterViewChecked } from         　　'@angular/core';
@Directive({
selector: '[emptyRow]'
})
export class EmptyRowDirective implements OnInit, AfterViewChecked {
    textElement: any;
    actionElement : any;
    constructor(private renderer: Renderer2, 
        private hostElement: ElementRef) {
    }

ngOnInit() {
    this.hostElement.nativeElement.getElementsByClassName('datatable-body')[0].addEventListener("scroll", event => {
        this.hostElement.nativeElement.getElementsByClassName('datatable-header')[0].scrollLeft = event.srcElement.scrollLeft;
    });
}

ngAfterViewChecked(){
    if (this.hostElement.nativeElement.getElementsByClassName('empty-row').length != 0){
 　　　this.hostElement.nativeElement.getElementsByClassName('empty-row')[0].style.width = this.hostElement.nativeElement.getElementsByClassName('datatable-row-center')[0].style.width;
　　}
}

}

【讨论】：

请在您的回答中添加一些解释