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

Question

I use angular2 with jQuery, I created a datatable, when I use static data all well, but as soon as I do a loop *ngFor nothing works (filtering, pagination, search)

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

some help ? thanks all

Answer 1

Pass the data to your datatable and let it worry about rendering the records. Like this:

In your 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>

In your 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);

If you want to bind an 'angular2 event or property' (like (click) or [routerLink]) to your hyperlink(s) in the datatable, it won't work because this HTML has been 'dynamically' generated. To do that, you will also have to do something on the lines of:

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

Apart from passing the data like in your case, there are other useful options that you can pass to the datatable.

Answer 2

This is because via ngFor you just displaying data in view. Your jQuery DataTables don't know nothing about your data source. That is why your pagination, search and other options won't work. What you can do is basically display data via jQuery DataTables and then you will be able to use available options(data will be loaded to dataTables).