Question

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

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

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

获取数据后，我想实例化数据表，并且尝试执行以下操作：

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？

Answer 1

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

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

研究这些。

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

datatable.net也不是一种响应式解决方案，因此当列太多时，您会遇到各种麻烦。

一个更好的解决方案是停止使用datatable.net并在绑定有效的地方使用devextreme或ag-grid，这两种绑定都有许多特定于Angular的示例。

带有datatable.net角6的ChangeDetection

1 个答案: