使用angular2 * ngFor填充表格？

我正在尝试使用从get请求中检索到的信息填充bootstrap样式表.

我得到的信息很好,但它没有以所需的方式输出.

这是我的代码;

查看组件

<div class="col-md-12">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <view-employee-list [employee]="employee" *ngFor="let employee of employees" ></view-employee-list>
        </tbody>
    </table>
</div>

view-employee-list组件

<tr>
     <td>{{employee.name}}</td>
</tr>

但是它没有输出所需的结果,这里是dom树的图像;

并且对于我想要复制的那种表格;

w3schools bootstrap table

我认为模板语法将被忽略,dom会将模板容器中包含的内容解释为“根”级别,但事实并非如此.

我不确定如何解决问题,并希望有人可以提供一些建议？

解决方法

如果您改为使用属性选择器并将视图更改为仅在该模板内创建列td.

<div class="col-md-12">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr view-employee-list [employee]="employee" *ngFor="let employee of employees" ></tr>
        </tbody>
    </table>
</div>

view-employee-list组件

selector: '[view-employee-list]'
template: '<td>{{employee.name}}</td>'