使用Material标签时，浏览器缩放导致ngx-datatable列显示异常

环境版本 #

• ngx-datatable 19.0.0
• Angular 11.1.0
• Material 11.2.13

问题描述 #

设置[columnMode]='force'时，页面初始加载列能正常填满屏幕，但浏览器缩放后列无法适配屏幕；即使恢复初始窗口尺寸，列依然无法回到填满状态。
若改用[columnMode]='standard'，列尺寸不会随页面缩放变化，但无法填满整个页面，而这正是force模式原本的优势。

问题截图 #

解决方案 #

方法1：监听窗口resize事件手动触发表格重绘 #

在组件中监听窗口大小变化事件，调用ngx-datatable的recalculate()方法强制表格重新计算列宽，添加防抖避免频繁触发：

import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';
import { Subscription, fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, OnDestroy {
  @ViewChild(DatatableComponent) datatable: DatatableComponent;
  resizeSubscription: Subscription;

  ngOnInit(): void {
    this.resizeSubscription = fromEvent(window, 'resize')
      .pipe(debounceTime(100))
      .subscribe(() => {
        this.datatable?.recalculate();
        // 若recalculate无效，可补充触发变更检测
        // this.changeDetectorRef.detectChanges();
      });
  }

  ngOnDestroy(): void {
    this.resizeSubscription?.unsubscribe();
  }
}

方法2：强制表格容器宽度继承父容器 #

通过样式确保ngx-datatable及其内部元素始终占满父容器宽度，避免缩放时容器尺寸未同步：

::ng-deep .ngx-datatable {
  width: 100% !important;
}

::ng-deep .ngx-datatable .datatable-header,
::ng-deep .ngx-datatable .datatable-body {
  width: 100% !important;
}

方法3：升级ngx-datatable版本（可选） #

当前使用的19.0.0版本可能存在已知的resize适配bug，可尝试升级到20.x或21.x等稳定版本，新版本大概率修复了这类布局问题，升级前需确认与Angular 11的兼容性。

内容的提问来源于stack exchange，提问作者Luciana Oliveira