javascript - 类选择器弄乱了 Angular 2 中表格的渲染

Question

我想制作一个 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>

不幸的是，< teams-players-list > 元素弄乱了表格的呈现。如何解决这个问题呢？有没有办法让 angular2 不渲染 元素？

Answer 1

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

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

而不是:

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

然后在你的表中使用这样的组件:

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

您需要删除 <tr></tr>来自 TableRowsComponent 的标签