テーブルに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ツリーの画像です。

とref私が複製しようとしているテーブルのようなもののために。

w3schools bootstrap table

私はテンプレートの構文は無視されるだろうとDOMは「ルート」レベルにテンプレート・コンテナの中に含まれていたものを解釈し、しかし、これはそうではないと思いました。

私はこの問題をどのように修正するのか分かりませんし、誰かがアドバイスを提供したいと思っていましたか？ 「[ビュー従業員リスト]を」 `コンポーネント内<tr>タグを排除し、それがベースの属性にする、そして、

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

：

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

は、この調整のようなものを試してみてください。この方法では、タグはテンプレートラッパーの一部です。