Angular2 表行作为组件 [英] Angular2 table rows as component

问题描述

我正在试验 angular2 2.0.0-beta.0

I am experimenting with angular2 2.0.0-beta.0

我有一个表格，行内容是由angular2以这种方式生成的:

I have a table and the line content is generated by angular2 this way:

    <table>
        <tr *ngFor="#line of data">
            .... content ....
        </tr>
    </table>

现在可以了，我想将内容封装到一个组件表格行"中.

Now this works and I want to encapsulate the content into a component "table-line".

    <table>
        <table-line *ngFor="#line of data" [data]="line">
        </table-line>
    </table>

并且在组件中，模板具有 <tr><td> 内容.

And in the component, the template has the <tr><td> content.

但是现在表不再工作了.这意味着，内容不再显示在列中.在浏览器中，检查器显示 DOM 元素如下所示:

But now the table does no more work. Which means, the content is no longer shown in columns. In the browser, the inspector shows me that the DOM elements look like this:

    <table>
        <table-line ...>
            <tbody>
                <tr> ....

我怎样才能做到这一点?

How can I make this work?

推荐答案

使用现有的表格元素作为选择器

table 元素不允许 元素作为子元素，浏览器会在找到它们时将其删除.您可以将它包装在一个组件中，并且仍然使用允许的 <tr> 标签.只需使用 "tr" 作为选择器.

The table element doesn't allow <table-line> elements as children and the browser just removes them when it finds them. You can wrap it in a component and still use the allowed <tr> tag. Just use "tr" as selector.

使用