Angular 将扩展面板添加到“角度材质表”内的行

我试图添加一个类似于mat accordion的扩展面板（可能是一个新组件），以在单击时显示mat表行内的详细视图。我已经附上了一个plunker来证明这一要求。

这是演示的angular material表，我正试图将扩展列添加到该表中，并且在html数据表中添加了plunker

不
{{element.position}
名称
{{element.name}
重量
{{element.weight}}
象征
{{element.symbol}

在angular2物料文档中，现在有一个具有可展开行的表格示例：

这里有一个 但我也包括了下面的AngleMaterial文档中的片段

从'@angular/core'导入{Component}；
从“@angular/animations”导入{动画、状态、样式、转换、触发器}；
/**
*@具有可扩展行的标题表
*/
@组成部分({
选择器：“表可扩展行示例”，
样式URL:['table-expandable-rows-example.css']，
templateUrl:“表可扩展行示例.html”，
动画：[
触发器（'detailExpand'[
状态（'collapped'，样式（{height:'0px'，minHeight:'0'}）），
状态（'expanded'，样式（{height:'*'}）），
过渡（“展开折叠”，动画（“225ms立方贝塞尔（0.4,0.0,0.2,1）”，
]),
],
})
导出类TableExpandableRowsExample{
数据源=元素\数据；
columnsToDisplay=[“名称”、“重量”、“符号”、“位置”]；
expandedElement:PeriodiceElement | null；
}
导出接口周期元素{
名称：字符串；
职位：编号；
重量：个数；
符号：字符串；
描述：字符串；
}
常量元素_数据：PeriodiceElement[]=[
{
职位:1,，
名称：“氢”，
重量：1.0079，
符号：“H”，
说明：`氢是一种化学元素，符号为H，原子序数为1。带有标准
氢的原子量为1.008，是元素周期表上最轻的元素`
}, {
职位：2，
名称：'氦'，
重量：4.0026，
符号:"他",，
说明：`氦是一种化学元素，符号为He，原子序数为2。它是一种化学元素
无色、无味、无味、无毒、惰性、单原子气体，在惰性气体中居首位
元素周期表中的一组。它的沸点是所有元素中最低的`
}, {
职位：3，
名称：'锂'，
重量：6.941，
符号:"李",，
说明：`锂是一种化学元素，符号为Li，原子序数为3。它是一种软物质，
银白色碱金属。在标准条件下，它是最轻的金属，也是
最轻的固体元素`
}, {
职位：4，
名称：“铍”，
重量：9.0122，
符号：“Be”，
说明：`铍是一种化学元素，符号为Be，原子序数为4。它是一种化学元素
宇宙中相对稀有的元素，通常是宇宙物质层裂的产物
与宇宙射线碰撞的较大原子核`
}, {
职位：5，
名称：'硼'，
重量：10.811，
符号：“B”，
说明：`硼是一种化学元素，符号为B，原子序数为5。全部生产
由于宇宙线散裂和超新星而不是恒星核合成，它是一个
太阳系和地壳中的低丰度元素`
}, {
职位：6，
名称：“碳”，
重量：12.0107，
符号：“C”，
说明：`碳是一种化学元素，符号为C，原子序数为6。它是非金属元素
和四价电子形成共价化学键。它属于
至周期表第14组`
}, {
职位：7，
名称：“氮”，
重量：14.0067，
符号：“N”，
说明：`氮是一种化学元素，符号为N，原子序数为7。它是第一种
1772年被苏格兰医生丹尼尔·卢瑟福发现并隔离`
}, {
职位：8，
名称：“氧气”，
重量：15.9994，
符号：“O”，
说明：`氧是一种化学元素，符号为O，原子序数为8。它是原子序数的一员
元素周期表上的硫族，一种高活性非金属和一种氧化金属
易与大多数元素以及其他化合物形成氧化物的试剂`
}, {
职位：9，
名称：'氟'，
重量：18.9984，
符号：“F”，
说明：`氟是一种化学元素，符号为F，原子序数为9。它是
最轻的卤素，以剧毒的淡黄色双原子气体的形式存在
条件`
}, {
职位：10，
名称：“霓虹灯”，
体重：20.1797，
符号：“Ne”，
说明：`氖是一种化学元素，符号为Ne，原子序数为10。它是一种惰性气体。
氖在标准条件下是无色、无味、惰性单原子气体，约
三分之二的空气密度`
},
];
表格{
宽度：100%；
}
tr.example-detail-row{
身高：0；
}
tr.example-element-row:not（.example-expanded row）：悬停{
背景：白烟；
}
tr.example-element-row:非（.example-expanded row）：活动{
背景：#efef；
}
.示例元素行td{
边框底宽：0；
}
.示例元素详细信息{
溢出：隐藏；
显示器：flex；
}
.示例元素图{
最小宽度：80px；
边框：2件纯黑；
填充：8px；
字体重量：较轻；
利润率：8px0；
高度：104px；
}
.示例元素符号{
字体大小：粗体；
字体大小：40px；
线高：正常；
}
.示例元素说明{
填充：16px；
}
.示例元素描述属性{
不透明度：0.5；
}

{{column}}
{{元素[列]}}
{{element.position}
{{element.symbol}
{{element.name}
{{element.weight}}
{{element.description}
--Wi