Angular 2, jQuery, *ng不工作？

Question

我将 angular2 与 jQuery 一起使用，我创建了一个数据表，当我很好地使用静态数据时，但是一旦我做了一个循环 *ngFor 就没有任何效果（过滤、分页、搜索）

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 event or property'（如（单击）或 [routerLink]）绑定到数据表中的超链接，它将无法工作，因为此 HTML 已被'dynamically' 生成。为此，您还必须执行以下操作：

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 之外，您还可以将 other useful options 传递给数据表。

Answer 2

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

Angular 2, jQuery, *ng不工作？

Angular 2, jQuery, *ngFor not working?

datatable

jquery

ngfor

angular