ngFor in tr无法在angular2中按预期方式工作 [英] ngFor in a tr not working as expected in angular2

问题描述

我正在玩角2(第一天；).

I'm playing around with angular 2 (first day;)).

我正在使用一个显示tr的组件，另一个将在其中重复tr的组件.

I'm using a component that displays a tr, and the another that will repeat tr's inside of it.

<h3>Sensor list</h3>
<a (click)="refreshSensors()" class="btn btn-primary">Escanear Sensores</a>

<table class="table">
    <thead>
        <tr>
            <th>Sensor</th>
            <th>Description</th>
        </tr>
    </thead>
    <sensor-list [sensors]="sensors"></sensor-list>
</table>

然后在传感器列表中:

<h3>Sensor list</h3>
<a (click)="refreshSensors()" class="btn btn-primary">Escanear Sensores</a>

<table class="table">
    <thead>
        <tr>
            <th>Sensor</th>
            <th>Description</th>
        </tr>
    </thead>
    <sensor-list [sensors]="sensors"></sensor-list>
</table>

虽然ngFor正确地重复了tr，但我在html内却获得了一个标记，该标记使表格无法正常显示:

While ngFor is repeating the tr's propertly, i'm getting a tag inside my html that makes the table not displaying as it should:

    <table class="table">
    <thead>
        <tr>
            <th>Sensor</th>
            <th>Description</th>
        </tr>
    </thead>
    <sensor-list><tbody><!--template bindings={}--><tr>
    <td>R2D2</td>
    <td>Description of r2d2</td>
</tr><tr>
    <td>C3PO</td>
    <td>Description of c3po</td>
</tr></tbody></sensor-list>
</table>

我是否必须指定要在组件中显示的标签?正确地做到这一点的正确方法是什么?

Do I have to specify the tag i want to display in the component? what is the correct way of doing this in angular?

推荐答案

Angular 2始终将host标记保留在DOM中，并且仅将模板中的HTML插入到此host标记中.由于 tr 标记列表并不是组件的真正好用，因此我将重新考虑您在此处进行代码设计的选择.最好将整个表放入一个组件中.

Angular 2 always leaves the host tag in the DOM and only inserts the HTML from your template into this host tag. Since a list of tr tags isn't really a good use for a component, I would rethink your code design choice there. It would probably be better to put the whole table into a component.

这篇关于ngFor in tr无法在angular2中按预期方式工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！