angular - 无数据时datatable水平滚动条

Question

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

有数据就好了。

Answer 1

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

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

Answer 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;
　　}
}

}