相关疑难解决方法(0)

我正在努力找到一种方法来做到这一点.在父组件中,模板描述了a table及其thead元素,但委托将其呈现tbody给另一个组件,如下所示:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody *ngFor="let entry of getEntries()">
    <my-result [entry]="entry"></my-result>
  </tbody>
</table>

每个myResult组件都会呈现自己的tr标记,基本上是这样的:

<tr>
  <td>{{ entry.name }}</td>
  <td>{{ entry.time }}</td>
</tr>

我没有直接将它放在父组件中(避免需要myResult组件)的原因是myResult组件实际上比这里显示的更复杂,所以我想把它的行为放在一个单独的组件和文件中.

结果DOM看起来很糟糕.我相信这是因为它是无效的,因为tbody只能包含tr元素(参见MDN),但我生成的(简化的)DOM是:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <my-result>
      <tr>
        <td>Bob</td>
        <td>128</td>
      </tr>
    </my-result>
  </tbody>
  <tbody>
    <my-result>
      <tr>
        <td>Lisa</td>
        <td>333</td>
      </tr>
    </my-result>
  </tbody>
</table>

有没有什么方法我们可以得到相同的渲染,但没有包装<my-result>标签,并仍然使用组件独自负责渲染表行？

我已经看过了ng-content,DynamicComponentLoader的ViewContainerRef,但他们似乎并不至于我可以看到提供一个解决的办法.