使用带有 REST API 的自定义微调器时，Angular DataTable 中缺少搜索和分页功能”

Question

我在 Angular 数据表中使用微调器来指示数据正在加载。尽管数据集很大，但在数据加载到表中后，“搜索”、“分页”和列排序的默认功能不会出现。下面是我的代码

export class MyLayoutComponent implements OnInit, OnDestroy, AfterViewInit 
{
title: string | undefined;

path: string | undefined;

data: any[] = [];

xmlData: String[] = [];

dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
selectedRowData: string | undefined;
screenHeight: any;
scrollFraction: any;
scrollYValue: any;
errorAlert: boolean = false;
isLoading: boolean = true;

constructor(private restApi: MyApiService) {}

ngOnInit(): void {
this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 100,
  lengthMenu: [100, 200, 300],
  searching: true,
  autoWidth: true,
};
this.fetchData();
}

ngAfterViewInit(): void {}

ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}

fetchData() {
this.restApi.getMyReq()
  .pipe(finalize(() => this.isLoading = false))
  .subscribe(
    (response: any) => {
      this.data = response;
      this.initializeDataTable();
    },
    error => {
      console.error('Error fetching data', error);
    }
  );
  }

  initializeDataTable() {
    this.dtTrigger.next(0);
  }
  }

当我在initializeDataTable()方法中包含setTimeout()时，微调器会出现一段时间并被禁用，并且在2秒延迟后表会正确显示并具有所有默认功能。 以下是相关代码片段。

  initializeDataTable() {
     setTimeout(() => {
        this.dtTrigger.next(0);
       }, 2000); // Delay of 1 second (1000 milliseconds)
  }

有人可以提供帮助吗？添加延迟并不是理想的解决方案，因此我正在寻找替代方法来解决此问题。？

Answer 1

为了确保 DataTables 初始化与数据加载过程正确同步，请考虑使用 RxJS 运算符和生命周期挂钩的组合。

你可以尝试：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class MyLayoutComponent implements OnInit, OnDestroy, AfterViewInit {
  // ... your existing code ...

  private destroy$ = new Subject<void>(); 

  ngOnInit(): void {
    // ... your existing code ...

    this.fetchData();
  }

  ngOnDestroy(): void {
    this.destroy$.next(); 
    this.destroy$.complete(); 
  }

  fetchData() {
    this.restApi.getMyReq()
      .pipe(
        takeUntil(this.destroy$), 
        finalize(() => this.isLoading = false)
      )
      .subscribe(
        (response: any) => {
          this.data = response;
          this.initializeDataTable(); 
        },
        error => {
          console.error('Error fetching data', error);
        }
      );
  }

  initializeDataTable() {
    this.dtTrigger.next(); // Initialize DataTable
  }
}