Question

我想在角度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>

不幸的是＆lt;球队 - 球员名单＆gt;元素搞乱了表的呈现。如何解决这个问题呢？有没有办法使angular2不渲染＆lt;球队 - 球员名单＆gt;元素？

Answer 1

您可以将'selector'更改为属性而不是元素标记，例如：

@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代码

类选择器弄乱角度为2

1 个答案: