Angular 2中使用ngFor时,是否可以不用组件选择器标签包裹组件内容?
When using ngFor in Angular 2, is it possible to not wrap component content with component selector tag?
我正在尝试显示 table 个用户。每个 <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">
但结果我得到了 table,里面有多个 <user-row></user-row>
标签,里面有 <tr>
标签。
有一个解决方案 - 将 selector
属性 设置为 tr.user-row
之类的内容,然后从 <user-row>
模板中删除 wrpapping <tr>
标签。
但是如果我需要在同一个 table 中显示每个用户的订单列表,就在 <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>
`
})
您可以在这里使用模板标签。当然,可以按照您想要的方式设置样式和格式。这可能没有意义,所以我 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>
我正在尝试显示 table 个用户。每个 <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">
但结果我得到了 table,里面有多个 <user-row></user-row>
标签,里面有 <tr>
标签。
有一个解决方案 - 将 selector
属性 设置为 tr.user-row
之类的内容,然后从 <user-row>
模板中删除 wrpapping <tr>
标签。
但是如果我需要在同一个 table 中显示每个用户的订单列表,就在 <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>
`
})
您可以在这里使用模板标签。当然,可以按照您想要的方式设置样式和格式。这可能没有意义,所以我 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>