Javascript 如何使用Angular插入表格行

嘿，天使巫师

我正在从事Angular版本4.0.0的项目

我的应用程序组件模板中有以下结构：

<table>
  <thead>
   <th>ID</th>
   <th>Label</th>
   <th>Action</th>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of items">
      <tr app-vcr [item]="item"></tr>
    </ng-container>
  </tbody>
</table>

<td>{{item.id}}</td>
<td>{{item.label}}</td>
<td><button (click)="viewDetails()">Details</button></td>

<tr>
 <td colspan="99">
  <div>
   {{item.details}}
  </div>
 </td>
</tr>

我遇到的问题是，当我单击“查看详细信息”按钮时，它会插入详细信息组件，但它会像这样插入它：

<app-vcr-details> <--- ** this gets inserted, which is breaking the table **
 <tr>
  <td colspan="99">
    <div>
      Show the item details here!
    </div>
  </td>
 </tr>
</app-vcr-details>

---

我建议不要为表行使用组件，而是为整个表使用组件

<app-vcr-details> <--- ** this gets inserted, which is breaking the table **
 <tr>
  <td colspan="99">
    <div>
      Show the item details here!
    </div>
  </td>
 </tr>
</app-vcr-details>

<div> <--- ** this gets inserted, which is also breaking the table **
 <tr>
  <td colspan="99">
    <div>
      Show the item details here!
    </div>
  </td>
 </tr>
</div>