Javascript 如何在Angular2的DataTable指令中插入子元素?

Javascript 如何在Angular2的DataTable指令中插入子元素?,javascript,jquery,angular,jquery-plugins,datatables,Javascript,Jquery,Angular,Jquery Plugins,Datatables,我制作了一个DataTable指令,希望在其中添加一个子元素。我的问题是,有一段代码需要重复,但由于编译的方式,我无法重复它。请建议如何处理此问题,以便我可以打印列表而不是仅打印字符串 DataTable.Directive.ts import { Directive, Input, OnInit, ElementRef, Inject } from '@angular/core'; import 'datatables.net'; declare var jQuery: any; @Dir

我制作了一个DataTable指令,希望在其中添加一个子元素。我的问题是,有一段代码需要重复,但由于编译的方式,我无法重复它。请建议如何处理此问题,以便我可以打印列表而不是仅打印字符串

DataTable.Directive.ts

import { Directive, Input, OnInit, ElementRef, Inject } from '@angular/core';
import 'datatables.net';

declare var jQuery: any;

@Directive({
    selector: '[dataTable]'
})
export class DataTableDirective implements OnInit {

    /**
     * DataTable options for initiating the DataTables.
     */
    @Input()
    dataTableOptions: any;

    /**
     * Whether the DataTables have a Child Element. A boolean variable for the 
     * same.
     */
    @Input()
    hasChild: Boolean;

    /**
     * Create a instance Variable that will be instantiated
     * for the DataTables
     */
    dataTableInstance: Promise<any>;

    constructor( @Inject(ElementRef) private el: ElementRef) {
        this.dataTableOptions = jQuery.extend(true, {}, jQuery.fn.DataTable.defaults);
    }

    format(d): string {
        // `d` is the original data object for the row
        return `<div class="row">
            <ul>
                <li *ngFor="x in d.client_admin_list">
                    {{x.name}}
                </li>
            </ul>
        </div>`
    }



    ngOnInit() {
        this.dataTableInstance = new Promise((resolve, reject) => {
            Promise.resolve(this.dataTableOptions).then(dtOptions => {

                //Implementing the DataTables by calling it on the host element
                let dt = jQuery(this.el.nativeElement).DataTable(dtOptions);

                //This Variable Refers to the 'this' of the Class. i.e Instance Variable.
                let _thisFuncRef = this;

                if (this.hasChild) {
                    //Adding the Child Grid Functionality if required by the client
                    jQuery(this.el.nativeElement).on('click', 'td.details-control', function () {
                        var tr = jQuery(this).closest('tr');
                        var row = dt.row(tr);
                        if (row.child.isShown()) {
                            // This row is already open - close it
                            row.child.hide();
                            tr.removeClass('shown');
                        }
                        else {
                            // Open this row
                            row.child(_thisFuncRef.format(row.data())).show();
                            tr.addClass('shown');
                        }
                    });
                }
                resolve(dt);
            });
        });
    }
}
import{Directive,Input,OnInit,ElementRef,Inject}来自“@angular/core”;
导入“datatables.net”;
声明var jQuery:any;
@指示({
选择器:“[dataTable]”
})
导出类DataTableDirective实现OnInit{
/**
*用于启动数据表的数据表选项。
*/
@输入()
dataTableOptions:任意;
/**
*数据表是否有子元素。用于
*一样。
*/
@输入()
hasChild:布尔型;
/**
*创建将被实例化的实例变量
*对于数据表
*/
dataTableInstance:承诺

我希望正确的插值发生在这种情况下是不会发生的。我从很长一段时间以来一直被这个问题困扰着

注意:我正在使用DataTables JQuery插件以及Angular 2和Typescript