作为一个刚刚接触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');
果然，看到了我心心念念的效果！
其实中间还有许多小白的概念查询的过程，先解决问题吧，估计那些也只有我不懂吧!
哈哈，希望可以帮到大家一点点，不喜勿喷哦！
