Javascript 在Angular 2中使用ngFor时，是否可以不使用组件选择器标记包装组件内容？

我正在尝试显示用户表。每个

标记都由

UserRowComponent

描述：

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

因此，最好使用

*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.first_name}
{{user.last_name}
`
})

和

的模板：

@组件({
选择器：“用户行”，
模板：`
订单号
订购日期
订单金额
`
})

的模板：

@组件({
选择器：“用户订单行”，
模板：`
{{order.id}
{{order.date}
{{order.amount}}
`
})

您可以在此处使用模板标记。当然，按照你想要的方式设计样式和格式。这可能没有意义，所以我为你感到高兴

名字
姓
{{user.firstName}
{{user.lastName}
身份证件
日期
数量
{{order.id}}
{{order.date}
{{order.amount}}

您可以在此处使用模板标记。当然，按照你想要的方式设计样式和格式。这可能没有意义，所以我为你感到高兴

名字
姓
{{user.firstName}
{{user.lastName}
身份证件
日期
数量
{{order.id}}
{{order.date}
{{order.amount}}

<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.
-->

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

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

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