使用angular2 * ngFor填充表格？

Question

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

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

这是我的代码;

视图分量

<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树的图像;

和参考样表我试图复制的;

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>标签，使其基于属性的`“[查看员工列表]”。这样，标签就是模板包装的一部分。