使用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>標籤，使其基於屬性的`「[查看員工列表]」。這樣，標籤就是模板包裝的一部分。