使用angular2 * ngFor填充表格？

Question

我尝试使用从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会将模板容器中包含的内容解释为＆＃39; root＆＃39;等级，但事实并非如此。

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

Answer 1

如果您改用属性选择器并将视图更改为仅在该模板中创建列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>'

Answer 2

尝试类似这样的调整：

<tbody>
  <tr view-employee-list [employee]="employee" *ngFor="let employee of employees"></tr>
</tbody>

然后，消除组件内的<tr>标签，并使其基于“[view-employee-list]”属性。这样，标记就是模板包装器的一部分。