ngx-datatable 自动改变宽度 resize recalculate

import { DatatableComponent } from "@swimlane/ngx-datatable";
import {AfterContentChecked, ChangeDetectorRef, Directive} from "@angular/core";

@Directive({ selector: '[ngx-resize-watcher]' })
export class NgxResizeWatcherDirective implements AfterContentChecked {
    private latestWidth: number;

    constructor(private table: DatatableComponent, public ref: ChangeDetectorRef) { }

    ngAfterContentChecked() {
        if (this.table && this.table.element.clientWidth !== this.latestWidth) {
            this.latestWidth = this.table.element.clientWidth;
            this.table.recalculate();
            this.ref.markForCheck();
            window.dispatchEvent(new Event('resize'));
        }
    }
}

 

将以上复制到你的新建文件中，并在相应module的declarations中声明 和 exports导出。

使用方法：

<ngx-datatable class="bootstrap" ngx-resize-watcher>
<ngx-datatable>