如何在 Angular 2+ 中初始化 Datatable，而不使用 JQuery

【问题标题】：How to initialize Datatable in Angular 2+, without using JQuery如何在 Angular 2+ 中初始化 Datatable，而不使用 JQuery
【发布时间】：2018-08-28 07:51:12
【问题描述】：

我有一个具有唯一 ID 的表。我想将其初始化为数据表。可以使用什么语法？

我的桌子是这样的：

<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($) 的情况下实现这一目标？

【问题讨论】：

标签： angular typescript datatable

【解决方案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>

【讨论】：

我尝试在 ngAfterViewInit() 中放入 dataTable 初始化的代码，但这也给出了同样的错误。