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

}

希望這會有所幫助！