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脚本。

这是截图：http://hpics.li/efa3c31

Answer 1

请注意，您正在frame = np.nan_to_num(frame) frame = np.array(frame) frame = np.reshape(-1, 37) frame = pd.DataFrame(frame, columns=header)生命周期钩子中使用jQuery访问DOM。

<强> ngOnInit（）

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

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

<强> ngAfterViewInit（）

在Angular初始化组件的视图和子视图后做出响应观点。在第一次ngAfterContentChecked（）之后调用一次。 - https://angular.io/guide/lifecycle-hooks

您应修改ngOnInit()的代码，如下所示：

CartographieComponent

希望这能解决你的问题。

Angular 2 DataTable

1 个答案: