解决在Angular2中DataTables的Child rows使用问题

       作为一个刚刚接触Angular2的新手小白，最近一段时间的确是遇到了若干难题。自从来到公司实习，工作内容一直是以后台为主，最近一直在网络资源和前端高手之间接受知识的洗礼。比如今天下午，也许对大神们来说这只是一个很小的问题吧。个人觉得网上的问题有些坑，姑且拿出来分享一下，也希望能够对需要的朋友提供一些帮助吧！

如何在Angular2中使用datatables的Child rows功能？

     首先说一下我想要的效果，我想在双击某一行的时候扩展改行，显示本行的扩展信息，效果大概如下所示：

那么我是怎么做的呢？

1.在模板里面实现datatables双击事件的监听

(dblclick)="showChild($event)"

2.在组件中实现showChild方法

参考网址：https://datatables.net/examples/api/row_details.html

根据参考网址中的内容，我在组件中增加了如下两个方法：

（1）showChild方法

showChild(e){

var tr = $(this).closest('tr');

var row =this.dataTable..row( tr );

if( row.child.isShown() ) {

row.child.hide();

tr.removeClass('shown');

}

else{

row.child(this.format(row.data()) ).show();

tr.addClass('shown');

}

}

（2）format方法（返回需要在子行中显示的内容）

format( d:any) {

// `d` is the original data object for the row

return''+

报告名称:

'+d.reportname+'

''+

APP名称:

'+d.appname+'

''+

成功脚本数:

d.successcriptnum

''+

'';

}

3.运行程序

然后运行程序，双击某一行并没有出现想要的效果，F12以后，会看到如下的错误信息：

很明显，这里提示的信息是格式化子行的时候，没有找到我说设置的属性reportname。

那么原因是什么呢？

一步一步找原因

找了一下午的问题，查到了许许多多相似的答案，结果都不是我想要的。

首先，既然问题出现在没有该属性值，那肯定是没有获取到行数据，在控制台输出tr,row，果然是undefined。

那么this又是什么呢？额，打出一串我看不懂的东西。。。

最后，我打印出了e，这是一个MouseEvent，有些信息刚好是我可以看懂的。

终于，我找到了解决办法

F12，一直看打印出来的MouseEvent信息，大家可以看一下下面这张图，看能不能找到原因：

对，虽然是行点击事件，但其实获得的target是td，而不是tr，this肯定是不对的。按照这个思路，我是不是可以从这个td开始去找到它最近的tr，理论上应该是可以的吧！

于是，我把获取tr的一行代码改成了下面这样的：

var tr = $(e.target).closest('tr');

果然，看到了我心心念念的效果！

其实中间还有许多小白的概念查询的过程，先解决问题吧，估计那些也只有我不懂吧!

哈哈，希望可以帮到大家一点点，不喜勿喷哦！