在表行下创建子表行

Question

我有一个迭代一些数据的动态表：

<table>
 <tbody>
  <tr *ngFor="let row of data; let i = index">
   <td (click)="addSubRow(row, i)"> + </td>
   <td>{{row.name}}</td>
  </tr>
 </tbody>
</table>

我想在每个tr子行下添加，在我的情况下，我将包含一个动态组件：

<div #placeholder></div>

到目前为止，我得到的最佳解决方案是增加一个td并使用css：

HTML：

<table>
 <tbody>
  <tr *ngFor="let row of data; let i = index">
   <td (click)="addSubRow(row, i)"> + </td>
   <td>{{row.name}}</td>
   <td><div #placeholder></div></td>
  </tr>
 </tbody>
</table>

的CSS：

tr {
  display: inline-flex;
  flex-wrap: wrap;
}
td {
  flex: 1;
  text-align: center;
}
td:last-child {
  flex: 0 0 100%;
}

让它看起来像一排，但它与我的css紧密相连。

选项二是this one。

有其他一些解决方案，但它们不属于angular 2+精神。

想知道这种情况的最佳方法，如果我的方法在某种程度上正确的方向，因为我是角度2+世界的新手。