我将如何使用 Angular 插入表格行

Question

嘿角精灵...

我正在使用 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>

在 app-vcr 模板中：

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

我有另一个带有以下模板的 app-vcr-details 组件：

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

在 app-vcr 组件中，我实现了 viewDetails() 方法：

import { Component, OnInit, ViewContainerRef, Input, Injector,ComponentFactoryResolver } from '@angular/core';

import { VcrDetailsComponent } from 'components/VcrDetailsComponent';

...

constructor(
 private elem:ViewContainerRef,
 private r: ComponentFactoryResolver
) {}

viewDetails(){
 let factory = this.r.resolveComponentFactory(VcrDetailsComponent);
 this.elem.createComponent(factory)
}

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

<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 的选择器更改为属性选择器，但后来我得到了这个：

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

如何以正确的方式插入详细信息表行？

谢谢。

Answer 1

我建议不要为表格行设置一个组件，而是为整个表格设置一个组件。