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