Question

我有一个名为＆＃34; groups-list＆＃34;的组件。它呈现一个组列表，但我希望将该列表的每个组元素作为一个不同的组件。所以，我会有一个group-list组件呈现包装器（在本例中是一个表）和一个＆＃34; group-list-element＆＃34;渲染每一行。

groups-list HTML模板：

<table class="table">
   <thead>
      ...
   </thead>
   <tbody>
      <tr *ngFor="let group of groups">
         <group-list-item-component [group]="group"></group-list-item-component>
      </tr>
   </tbody>
 </table>

group-list-element HTML模板：

<td class="body-element"><a class="element">{{group.name}}</a></td>
<td class="body-element"><a class="element">{{group.users}}</a></td>
<td class="body-element"><a class="element">{{group.allocation}}</a></td>
...

但是当浏览器呈现以下代码时，问题就出现了：

<table class="table">
   <thead>
      ...
   </thead>
   <tbody>
      <tr *ngFor="let group of groups">
         <group-list-item-component [group]="group"> // * This element breaks the table *
              <td class="body-element"><a class="element">{{group.name}}</a></td>
              <td class="body-element"><a class="element">{{group.users}}</a></td>
              <td class="body-element"><a class="element">{{group.allocation}}</a></td>
         </group-list-item-component>
      </tr>
   </tbody>
 </table>

为什么呢？我认为TABLE确实期望其中一个＆＃34;有效＆＃34;你可以放在里面的元素，比如tr，th，thead，tbody，tfooter ......

如何解决它保留我之前提到的组件？

提前致谢！

通过Angular 2组件

0 个答案: