Angular2表行作为成分 [英] Angular2 table rows as component

问题描述

与angular2 2.0.0试验beta.0，我有被angular2这种方式生成一个表，该行内容：

experimenting with angular2 2.0.0-beta.0, 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>

和在组件，模板具有在＆lt; TR>＆LT; 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 more shown in columns. In the browser, the inspector shows me the DOM elements look like this:

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

我怎样才能使这项工作？

How can I make this work?

推荐答案

table元素不允许＆LT;表行＆GT; 子元素，浏览器只是删除它们时，发现他们。您可以在组件包，并仍采用允许＆LT; TR＆GT; 标记。只需使用TR的选择。 ＆LT;模板＆GT; 应允许很好，但在所有的浏览器不能正常工作，尤其是旧版本。

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. <template> should be allowed as well but doesn't work in all browsers, especially older versions.

这篇关于Angular2表行作为成分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！