angular - 用 angular2 *ngFor 填充表格？

Question

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

我得到的信息很好，但没有以所需的方式输出。

这是我的代码；

View 组件

<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>

查看员工列表组件

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

但是它没有输出想要的结果，这里是dom树的图像；

对于 ref 我要复制的表格类型；

w3schools bootstrap table

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

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

Answer 1

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

查看员工列表组件

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