使用 datatable.net 角度 6 更改检测答案

【问题标题】：ChangeDetection with datatable.net angular 6使用 datatable.net 角度 6 更改检测
【发布时间】：2018-10-09 07:55:11
【问题描述】：

我编写的数据表组件遇到了很多问题。

例如，如果我从我的数据表中删除一行，则该行将被删除，但我的数据表会失去所有分页功能等。

我有一种感觉是因为我的数据是在数据表实例化之后加载的。

我想在获取数据后实例化 Datatable，我正在尝试执行以下操作：

export class DatatableComponent implements AfterViewInit, OnDestroy, OnInit {
  dataTable: any;
  @ViewChild('dt') private dataTableRef: any;

  @Input() responseModelObservable: Observable<any>;

  constructor(private modalService: NgbModal, private cdr: ChangeDetectorRef) { }

  ngOnInit() {
    this.modelConfig = datatableConfig[this.modelTypeName];
    this.initializeColumns();
  }

  ngAfterViewInit(): void {

    // TODO: need to cleanup to cater for rerendering
    // this.tableBody.changes.subscribe(t => {
    //   if (this.hasRenderedTable !== true && this.tableBody.length !== 0) {
    //     this.initializeDtOptions();
    //     this.dtTrigger.next();
    //     this.hasRenderedTable = true;
    //   }
    // });
  }

  private initializeColumns() {
    this.responseModelObservable.subscribe(x => {
        ...

        //detect if data changed:
        this.cdr.detectChanges();

        //Initialize datatable:
        this.dataTableRef.DataTable();

      } else {
        this.hasData = false;
      }
    });
  }
}

以上代码抛出如下错误：

_this.dataTableRef.datatableConfig 不是函数

数据加载后如何实例化Datatable？

【问题讨论】：

从ngAfterViewInit()而不是ngOnInit()调用initializeColumns
@AmitChigadani 仍然丢失排序顺序和页面数量

标签： angular typescript datatables angular6

【解决方案1】：

datatable.net 不适用于 Angular。它不绑定数据。您必须依赖 datatable.net 事件处理程序，例如：

datatable.on('init', () => {})

钩住这些。

https://datatables.net/manual/events#Listening-for-events

datatable.net 也不是一个响应式的解决方案，所以当你有太多列时你会得到各种各样的 qwerkiness。

更好的解决方案是停止使用 datatable.net 并使用 devextreme 或 ag-grid 绑定有效的地方，并且两者都有大量的 Angular 特定示例。

【讨论】：