angular 如何在关闭和打开导航栏时调整 ngx-datatable 的大小

Question

在点击导航栏上的<ngx-datatable>之前看起来像这样

单击导航栏后，它看起来像这样

正如您在第二张图片中看到的那样，导航栏列在单击后没有调整大小。

这是代码

<ngx-datatable
  #table
  class="material"
  [rows]="data"
  [loadingIndicator]="loadingIndicator"
  columnMode="force"
  [headerHeight]="60"
  [footerHeight]="80"
  rowHeight="auto"
  [limit]="10"
  [scrollbarH]="scrollBarHorizontal"
  [reorderable]="reorderable"
  [selected]="selected"
  [selectionType]="'checkbox'"
  (select)="onSelect($event)"
>

我寻求帮助，但找不到解决方案。 谢谢你。

Answer 1

每次单击侧栏切换时，您都需要刷新表格的行。

在我的用例中，我需要在一段时间后与ChangeDetectorRef一起进行刷新以使其正常工作。 这是我的代码片段：

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  constructor(private changeDetector: ChangeDetectorRef) { }

  ngOnInit(): void {
    // ...
  }

  
  // Call this function every time you close or open your sidenav
  resizeTable() {
    setTimeout(() => {
      this.data = [...this.data];
      this.changeDetector.detectChanges();
    }, 500);
  }

}

希望这会有所帮助！