Angular 2，jQuery，* ng对于不起作用？

Question

当我很好地使用静态数据时，我将Angular2与jQuery一起使用，创建了一个数据表，但是当我执行循环时* ng没有任何作用（过滤，分页，搜索）

component.html

<table id="dtb" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%"
           style="width:100%">
      <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Date</th>
        <th class="disabled-sorting text-right">Actions</th>
      </tr>
      </thead>
      <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th class="text-right">Actions</th>
      </tr>
      </tfoot>
      <tbody>
      <tr *ngFor="let data of datas">
        <td>{{data.Name}}</td>
        <td>{{data.Position}}</td>
        <td>{{data.Office}}</td>
        <td>{{data.Age}}</td>
        <td>{{data.Date}}</td>
        <td class="text-right">
          <a href="#" class="btn btn-simple btn-info btn-icon like"><i class="material-icons">favorite</i></a>
          <a href="#" class="btn btn-simple btn-warning btn-icon edit"><i class="material-icons">dvr</i></a>
          <a href="#" class="btn btn-simple btn-danger btn-icon remove"><i class="material-icons">close</i></a>
        </td>
      </tr>
      </tbody>
    </table>

compoent.ts

import {Component, OnInit, ElementRef} from '@angular/core';
import {TableData} from './table-data';
declare var $:any;

@Component({
  templateUrl: 'Home.component.html'
})
export class HomeComponent implements OnInit {

  datas: Array<any> = TableData;
  constructor(private _elRef: ElementRef) {}

  ngOnInit() {
    jQuery(this._elRef.nativeElement).find('#dtb').DataTable();
  }
}

一些帮助 ？ 谢谢大家

Answer 1

将数据传递到数据表，让它担心呈现记录。 像这样：

在您的component.html中：

<table id="dtb" tableClass="table table-condenced table-striped table-bordered">
    <thead>
        <tr>
            <th data-class="expand">Name</th>
            <th>Position</th>
            <th></th>
        </tr>
    </thead>
</table>

在您的component.ts中：

let options = {
    data: this.datas,
    columns: [
        { data: 'Name' },
        { data: 'Position' },
        {
            render: function (a, b) {
                return '<a href="#" class="btn btn-simple btn-info btn-icon like my-datatable-btn" id="' + a.Id + '"><i class="material-icons">favorite</i></a>';
        }
   }]

}

jQuery(this._elRef.nativeElement).find('#dtb').DataTable(options);

如果您想将“ angular2事件或属性”（例如（单击）或[routerLink]）绑定到数据表中的超链接，则将无法正常工作，因为此HTML是“动态”生成的。 为此，您还必须执行以下操作：

this._elRef.nativeElement.addEventListener('click', (event) => {
    var className = $(event.target).attr('class');
    if(className.indexOf('my-datatable-btn') > -1) { //check if the target of the click event is what you want.
        //Call your onclick handler here.
    }
});

除了像您的情况那样传递data外，还有其他一些有用的选项可以传递给数据表。

Answer 2

这是因为通过ngFor您只能在视图中显示数据。 您的jQuery DataTable对数据源一无所知。 这就是为什么您的分页，搜索和其他选项不起作用的原因。 您可以做的基本上是通过jQuery DataTables显示数据，然后您将能够使用可用的选项（数据将被加载到dataTables中）。