Angular 2 DataTable

Question

我想在角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> 

搜索和数据的显示数量不能正常工作。 PS：我的数据来自PHP脚本。

这里是截图：在这里，你正在访问的ngOnInit()生命周期挂钩使用jQuery的DOM http://hpics.li/efa3c31

Answer 1

通知。

ngOnInit（）

初始化角首先显示后的指令/组件 数据绑定属性，并设置指令/组件的输入 属性。在第一个ngOnChanges（）之后调用一次。 - https://angular.io/guide/lifecycle-hooks

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

ngAfterViewInit（）角后

回应初始化该组件的意见和儿童 意见。在第一个ngAfterContentChecked（）之后调用一次。 - https://angular.io/guide/lifecycle-hooks

您应该修改CartographieComponent的这样的代码：

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(); 
    } 

} 

希望这能解决你的问题。