Javascript 类选择器在angular 2中扰乱了表的呈现

我想在angular 2中创建一个TableRowsComponent，它可以渲染多个表行

I would like to use it in a template like this:

<table class>
    <tbody>
        <teams-players-list *ngFor="#item of list" [someInput]="item"></teams-players-list>
    </tbody>
</table>
(So "teams-players-list" would be the selector of the TableRowsComponent here) The template of the TableRowsComponent would be something like:

<tr>
    <td> foo </td> 
    <td> bar </td>
</tr>
<tr *ngIf="something">
    ....
</tr>
<tr *ngFor="..">
     ...
</tr>
If we were to do this then the result looks like this:

<table class>
        <tbody>
            <teams-players-list>
                <tr>
                    ...
                </tr> 
                <tr>
                    ...
                </tr> 
            </teams-players-list>
            <teams-players-list>
                <tr>
                    ...
                </tr> 
                <tr>
                    ...
                </tr> 
            </teams-players-list> 
        </tbody>
</table>

我想在这样的模板中使用它：
（因此，“团队球员列表”将是此处TableRowsComponent的选择器）TableRowsComponent的模板类似于：
福
酒吧
....
...
如果我们这样做，那么结果如下：
...
...
...
...

---

不幸的是，元素扰乱了表的渲染。如何解决这个问题？是否有办法使angular2不呈现元素？

您可以将“选择器”更改为属性而不是元素标记，例如：

@Component({
  selector: '[teams-players-list]', // this sets the selector to a <tr teams-players-list></tr> tag property
  ...
})
export class TableRowsComponent { ... }

@组件({
选择器：“[teams players list]”，//这将选择器设置为标记属性
...
})
导出类TableRowsComponent{…}

而不是：

@Component({
  selector: 'teams-players-list', // this sets the selector to a <teams-players-list></teams-players-list> tag
  ...
})
export class TableRowsComponent { ... }

@组件({
选择器：'团队球员列表'，//将选择器设置为标记
...
})
导出类TableRowsComponent{…}

然后在表中使用如下组件：

<table class>
  <tbody>
    <tr teams-players-list *ngFor="#item of list" [someInput]="item"></tr>
  </tbody>
</table>

您需要从

表格行组件中删除
标记，您可以尝试删除并将样式添加到类似
显示：表格行