0

ユーザーのテーブルを表示しようとしています。すべての<tr>タグは次のように記述されUserRowComponentます:

@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">

しかし、その結果、内部にタグを持つ複数の<user-row></user-row>タグを持つテーブルを取得します。<tr>

解決策があります-selectorプロパティを次のように設定し、テンプレートからtr.user-rowwrpapping<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.
-->

したがって、selector タグでラップせずに、プロパティ*ngForからコンテンツのみを表示するために使用すると便利です。templateコンポーネントのテンプレートは次のように記述されます。

@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>：

@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">
   `
})

のテンプレート<user-order-row>:

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

1 に答える 1

2

ここでテンプレートタグを利用できます。もちろん、スタイルとフォーマットはお好みで。これはおそらく意味をなさないので、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>
于 2016-06-30T19:31:36.437 に答える