当在Angular 2中使用ngFor时，有没有可能不使用组件选择器标签来包装组件内容?

When using ngFor in Angular 2, is it possible to not wrap component content with component selector tag?

本文关键字：组件 标签 选择器 包装 Angular ngFor 当在 有可能      更新时间：2023-09-26

我正在尝试显示用户表。每个<tr>标签由UserRowComponent描述:

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

For循环遍历用户，我使用:

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

但结果我得到表与多个<user-row></user-row>标签与<tr>标签内。

有一个解决方案-设置selector属性类似于tr.user-row，并从<user-row>模板中删除包装<tr>标签。

但是如果我需要在同一个表中显示每个用户的订单列表，就在<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.
-->

所以这将是伟大的使用*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>
   `
})

您可以在这里使用模板标记。当然，样式和格式是你想要的。这可能没有意义，所以我为你分叉并修改了一个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>
相关文章：