Angular2 with Datatables

问题:

Use Datatables in Angular2

I need to display the data in data table in angular2 component. For that I install the datatables.net and datatables.net.bs. I have the error of Uncaught TypeError: Cannot read property 'aDataSort' of undefined

Thanks in advance

My angular2 code is

ngOnInit() {
this.tableOptions ={
    autoWidth: true,
    order: [],
} 
this._userService.getUsers()
        .then(userDetailsListVOs => {this.userDetailsListVOs = userDetailsListVOs;
   if (this.tableWidget) {
        this.tableWidget.destroy();       
    }
    this.tableOptions = {
        retrieve:true,
        dom:'rt',
        data: userDetailsListVOs,
        columns: [
            { title: 'ULA ID', data: 'ulaId',className: 'all'},
            { title: 'City', data: 'city',className: 'none',sorting: false },
            { title: 'Actions',className: 'all',sorting: false,
            render: function ( row,type,data,meta) {
                 var edit = "<a [routerLink]=['/edit-profile',"+data.ulaId+"]><i class='fa fa-pencil'></i> Edit </a>"
                 var view = " [routerLink]=['/view-profile',"+data.ulaId+"]"
                return `<div class='btn-group'><button class='btn green btn-xs btn-outline dropdown-toggle' data-toggle='dropdown'>Tools<i class='fa fa-angle-down'></i></button>
                        <ul class='dropdown-menu pull-right'><li><a href="/edit-profile/` + data.ulaId + `"class="actionEdit"]><i class='fa fa-pencil'></i> Edit </a></li>
                        <li><a href="/view-profile/` + data.ulaId + `"class="actionView"]><i class='fa fa-eye'></i> View </a></li>
                        </ul></div>`;
            }
            }

        ],
        rowCallback: (row: Node, data: any | Object, index: number) => {
            $('.actionView', row).unbind('click');
            $('.actionView', row).bind('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                this.router.navigate(['/view-profile', data.ulaId]);
            });
            $('.actionEdit', row).unbind('click');
            $('.actionEdit', row).bind('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                this.router.navigate(['/edit-profile', data.ulaId]);
            });
            return row;
        }

    }
    this.shipmentsTable = $(this._elRef.nativeElement.querySelector('table'));
    this.tableWidget = this.shipmentsTable.DataTable(this.tableOptions);},
            error => this.errorMessage = <any>error);
            }

My Html code is

<table class="table dt-responsive" id="sample_1"></table>

I have a error