ChangeDetection с datatable.net угловой 6

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 также не является адаптивным решениемтак что вы получаете все виды qwerkiness, когда у вас слишком много столбцов.

Лучшим решением было бы прекратить использовать datatable.net и использовать devextreme или ag-grid где работает связывание, и оба из которых имеют множество конкретных примеров Angular.