Javascript 角度2数据表

我正在尝试在angular 2应用程序上使用Jquery DataTable，我已经成功安装了它，但仍然无法工作，我不知道为什么

以下是我的component.ts文件代码：

import {Component, ElementRef, OnInit} from '@angular/core';
import {Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';
const $ = require('jquery');
const dt = require ('datatables.net');
@Component({
  selector: 'app-cartographie',
  templateUrl: './cartographie.component.html',
  styleUrls: ['./cartographie.component.css', '../../../../node_modules/datatables.net-dt/css/jquery.dataTables.css']
})

export class CartographieComponent implements OnInit {
  public data;
  rootNode: any;

  constructor(rootNode: ElementRef, private http: Http) {
    this.rootNode = rootNode;
  }
  ngOnInit() {
    this.getData();
    const el = $(this.rootNode.nativeElement).find('#example')[0];
    $('#example').DataTable();
  }

  private getData() {
    this.http.get('http://localhost/ang.php/')
      .subscribe(res => this.data = res.json());
  }
}

下面是component.html文件代码：

<div class="container">
  <div class="panel">
    <div class="panel-heading">
      <div class="panel-title text-center">
        <h3>Cartographie</h3>
      </div>
    </div>
    <div class="panel-body">
    </div>
    <div class="row">
      <div class="col lg-12">
        <div class="example ">
          <table class="table table-striped display" id="example" >
            <thead >
            <tr>
              <th>Nom du poste</th>
              <th>Emploie</th>
              <th>Metier</th>
              <th>Famile</th>
            </tr>
            </thead>
            <tbody *ngFor="let grid of data">
            <tr class="gradeA">
              <td>{{ grid.NomDuPoste}}</td>
              <td>{{ grid.Emploie}}</td>
              <td>{{ grid.Metier  }}</td>
              <td>{{grid.Famille}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

制图师
邮名
就业
梅蒂埃
家族
{{grid.NomDuPoste}}
{{grid.Emploie}}
{{grid.Metier}}
{{grid.famile}}

显示的数据的搜索和数量不起作用。 PS：我的数据来自php脚本

---

这里是一个屏幕截图：

注意，您正在使用

ngOnInit（）

生命周期钩子中的jQuery访问DOM

ngOnInit（）

在Angular首次显示后初始化指令/组件 数据绑定属性并设置指令/组件的输入 财产。在第一个ngOnChanges（）之后调用一次--

但在您的情况下，必须先呈现组件的视图，然后才能访问DOM

ngAfterViewInit（）

Angular初始化组件的视图和子视图后响应 意见。在第一个ngAfterContentChecked（）之后调用一次

您应该修改

制图组件的代码，如下所示：

import {AfterViewInit} from '@angular/core';

// other imports here

export class CartographieComponent implements OnInit, AfterViewInit {

  // other code here

  ngOnInit() {
    this.getData();
  }

  ngAfterViewInit(){
    const el = $(this.rootNode.nativeElement).find('#example')[0];
    $('#example').DataTable();
  }

}

希望这能解决您的问题。
请注意，您正在使用
ngOnInit（）
生命周期挂钩中的jQuery访问DOM

ngOnInit（）

在Angular首次显示后初始化指令/组件
数据绑定属性并设置指令/组件的输入
财产。在第一个ngOnChanges（）之后调用一次--

但在您的情况下，必须先呈现组件的视图，然后才能访问DOM

ngAfterViewInit（）

Angular初始化组件的视图和子视图后响应
意见。在第一个ngAfterContentChecked（）之后调用一次

您应该修改
制图组件的代码，如下所示：

import {AfterViewInit} from '@angular/core';

// other imports here

export class CartographieComponent implements OnInit, AfterViewInit {

  // other code here

  ngOnInit() {
    this.getData();
  }

  ngAfterViewInit(){
    const el = $(this.rootNode.nativeElement).find('#example')[0];
    $('#example').DataTable();
  }

}

希望这能解决您的问题。
嗨，艾布拉尔，谢谢您的回答，我尝试了您的解决方案，但没有任何变化，仍然无效！嗨，艾布拉尔，谢谢你的回答，我尝试了你的解决方案，但没有任何改变，仍然不起作用！