javascript - 使用 Angular 6 插入数据时更新数据表

Question

我是 Angular 的新手，我有一个包含动态数据的数据表，每当我添加任何数据时我都会尝试刷新该表，但是由于某种原因，除非我自己刷新页面，否则数据不会被放置，我然而，请阅读文档，我找到的唯一选项是渲染器，但它没有给我我正在寻找的结果，而且我已经在整个互联网上进行了搜索，我发现的所有内容都是一种解决方法，甚至没有在我的情况下工作，如果你能帮我自动刷新表格，我将不胜感激。

员工职位.component.ts

ngOnInit(): void {
  // this approach works great when refreshing dropdown menu, but not in datatables
  this.restService.refreshNeeded$.subscribe((res: any) => {
    this.getAllPositions();

  this.dtOptions = {
    destroy: true,
    responsive: true,
    pagingType: 'full_numbers',
    pageLength: 5
};

})

getAllPositions(){
  return this.restService.GetAllPositions().subscribe((res: any) => {
    this.positions = res.data.positions;
    this.dtTrigger.next();
    this.loading = false;
  })
}

Answer 1

您需要在再次触发之前销毁数据表实例。

像这样尝试:

import { DataTableDirective } from 'angular-datatables';

dtElement: DataTableDirective;

isDtInitialized:boolean = false

  getAllPositions() {
    this.restService.GetAllPositions().subscribe((res: any) => {
      this.positions = res.data.positions;
      this.loading = false;

      if (this.isDtInitialized) {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
          dtInstance.destroy();
          this.dtTrigger.next();
        });
      } else {
        this.isDtInitialized = true
        this.dtTrigger.next();
      }
    })
  }