Элегантный способ применить плагин jquery в Angular2

Я получаю данные из веб-сервиса в блоке ngOnInit, а затем мне нужно применить плагин таблицы данных jquery (это действие я выполнил как в ngAfterViewInit, так и в ngAfterContentInit). Проблема в том, что плагин jquery datatable не видит данных в таблице компонентов, которые были извлечены в блоке ngOnInit. Единственный способ реализовать это - setTimeout или setInterval (который останавливает выполнение, если создается экземпляр плагина).

Есть ли другой способ выполнить задачу, которую я пытаюсь выполнить?

export class DataTable implements OnInit, AfterViewInit, AfterContentInit, AfterContentChecked {

  public data = null;
  public table = null;

  constructor(public translate: TranslateService, public ngZone: NgZone) {
  }

  ngOnInit(): void {
    this.translate.getData().subscribe((records) => {
      this.data = records;
    });
  }

  ngAfterViewInit(): void {
   this.dataTableDynamicUpdater();
  }

  ngAfterContentInit() : void {

  }

  ngAfterContentChecked() {

  }


  dataTableDynamicUpdater() {
    let self = this;
    let interval = setInterval(() => {
      if(self.data) {
        self.instantiateDataTable();
        clearInterval(interval);
      }
    }, 200);
  }

  instantiateDataTable() {

    let _FILTER_PLACEHOLDER_ = this.translate.instant('APP_DATATABLE_PLACEHOLDER_TYPE_TO_FILTER');
    let _FILTER_LABEL_ = this.translate.instant('APP_DATATABLE_LABEL_FILTER');
    let _SHOW_LABEL_ = this.translate.instant('APP_DATATABLE_LABEL_SHOW');

    $.extend($.fn.dataTable.defaults, {
      autoWidth: false,
      dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
      language: {
        search: '<span>_FILTER_LABEL_</span> _INPUT_',
        lengthMenu: '<span>_SHOW_LABEL_</span> _MENU_',
        paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
      }
    });


    // Column selectors
    let table = $('.table').DataTable({
      buttons: {
        buttons: [
          {
            extend: 'excelHtml5',
            className: 'btn btn-default',
            exportOptions: {
              columns: ':visible'
            }
          }
        ]
      }
    });

    // Add placeholder to the datatable filter option
    $('.dataTables_filter input[type=search]').attr('placeholder', _FILTER_PLACEHOLDER_);

    // Enable Select2 select for the length option
    $('.dataTables_length select').select2({
      minimumResultsForSearch: Infinity,
      width: 'auto'
    });

    return table;

  }

}

person bigweb    schedule 19.06.2017    source источник


Ответы (1)


Попробуйте сделать это после получения данных

ngOnInit(): void {
    let self = this;
    this.translate.getData().subscribe((records) => {
      this.data = records;
      self.instantiateDataTable();
    });
}
person Eduardo Vargas    schedule 19.06.2017
comment
Пробовал это решение, та же проблема. Плагин Datatable предупреждает о недоступности данных. - person bigweb; 19.06.2017
comment
вы смотрели primeng datatable? Это кажется лучшим решением, чем использование плагина jquery. primefaces.org/primeng/#/datatable - person Eduardo Vargas; 19.06.2017
comment
Или, может быть, переместите код из ngOnInit в ngAfterViewInit - person Eduardo Vargas; 19.06.2017