用 angular2 *ngFor 填充表？

Question

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

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

这是我的代码；

查看组件

<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

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

Answer 2

试试这样的调整：

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

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