Как инициализировать Datatable в Angular 2+, без использования JQuery

Question

У меня есть таблица с уникальным идентификатором. Я хочу инициализировать это как набор данных. Какой синтаксис можно использовать для одного и того же?

Мой стол выглядит так:

<table id="myDataTable">
       <thead>
          <tr>
           <th>Employee Id</th>
           <th>Employee Name</th>
           <th>Designation</th>
          </tr>
       </thead>
       <tbody>
          <tr>
            <td>123451</td>
            <td>Employee 1</td>
            <td>Senior Developer</td>
          </tr>

          <tr>
           <td>123452</td>
           <td>Employee 2</td>
           <td>Developer</td>
          </tr>
       </tbody>
    </table>

В файле TS, который я пробовал с кодом ниже:

@ViewChild('myDataTable') myDataTable: ElementRef;

ngOnInit(){
  this.myDataTable.nativeElement.dataTable({
    pagingType : 'full_numbers'
  });
}

Выдает ошибку в консоли браузера:

"Невозможно прочитать свойство 'nativeElement' из неопределенного"

Не могли бы вы помочь, как мы можем добиться этого без использования jquery($)?

Answer 1

jQuery не имеет к этому никакого отношения.

Когда вы используете ViewChild, ваш элемент будет инициализирован не в OnInit, а в событии жизненного цикла AfterViewInit.

Заменить ngOnInit на ngAfterViewInit или добавить его.

@ViewChild('myDataTable') myDataTable: ElementRef;

ngAfterViewInit () {
  this.myDataTable.nativeElement.dataTable({
    pagingType : 'full_numbers'
  });
}

и ваш шаблон должен быть с template variable. Angular обнаруживает ваш элемент через него.

<table id="myDataTable" #myDataTable>