Question

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

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>

如何在不使用JQuery的情况下在Angular 2+中初始化Datatable

1 个答案: