Angular 2でngForを使用する場合、コンポーネントセレクタタグでコンポーネントコンテンツをラップできないのでしょうか？

Question

私はユーザーのテーブルを表示しようとしています。私が使用しているユーザーを超える

Forループ

@Component({ 
    selector: 'user-row', 
    template: ` 
     <tr> 
      <td>{{ user.first_name }}</td> 
      <td>{{ user.last_name }}</td> 
     </tr> 
    ` 
}) 

：

<tr> 
    <!-- head of tabe --> 
    <th>...<th> 
    .... 
</tr> 
<user-row *ngFor="let user of users" [user]="user"> 

をしかし、結果として、私は内部の<tr>タグの付いた複数の<user-row></user-row>タグを持つテーブルを取得するすべての<tr>タグがUserRowComponentによって記述されています。

selectorのプロパティはtr.user-rowに設定されており、<tr>タグは<user-row>テンプレートから削除されています。

しかし、私は右のこのような<user-row>後、同じテーブル内の各ユーザの注文のリストを表示する必要がある場合：

<tr>...user-1 row...</tr> 
<tr> 
    <td>Order id</td> 
    <td>Order date</td> 
    <td>Order amount</td> 
</tr> 
<tr>...user-1 order-1 row ...</tr> 
<tr>...user-1 order-2 row ...</tr> 
<!-- user-2 with orders 
    user-3 with orders 
    etc. 
--> 

をだから、templateプロパティからコンテンツのみを表示するように*ngForを使用するように素晴らしいことですセレクタータグでの折り返しはありません。コンポーネントのテンプレートは、このように書かれます：

@Component({ 
    selector: 'user-row', 
    template: ` 
     <tr> 
      <td>{{ user.first_name }}</td> 
      <td>{{ user.last_name }}</td> 
     </tr> 
     <user-orders-list [orders]="user.orders"> 
    ` 
}) 

そして<user-order-list>のテンプレート：<user-order-row>ため

@Component({ 
    selector: 'user-row', 
    template: ` 
     <tr> 
      <td>Order id</td> 
      <td>Order date</td> 
      <td>Order amount</td> 
     </tr> 
     <user-order-row *ngFor="let order of orders" [order]="order"> 
    ` 
}) 

テンプレート：

@Component({ 
    selector: 'user-order-row', 
    template: ` 
     <tr> 
      <td>{{ order.id }}</td> 
      <td>{{ order.date }}</td> 
      <td>{{ order.amount }}</td> 
     </tr> 
    ` 
}) 

Answer 1

あなたがここにテンプレートタグを利用することができます。もちろん、スタイルや書式を自由に設定できます。これはおそらく意味がないので、私はforked and modified a plunkあなたのためです。

<table> 
     <template let-user ngFor [ngForOf]="users"> 
     <thead> 
      <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th></th> 
      </tr> 
     </thead> 
     <tr> 
      <td>{{user.firstName}}</td> 
      <td>{{user.lastName}}</td> 
      <td></td> 
     </tr> 
     <tr> 
      <th>ID</th> 
      <th>Date</th> 
      <th>Amount</th> 
     </tr> 
     <tr *ngFor="let order of user.orders"> 
      <td>{{order.id}}</td> 
      <td>{{order.date}}</td> 
      <td>{{order.amount}}</td> 
     </tr> 
     </template> 
    </table>