[英]Using Angular animations directly on the component selector does not affect the content of the component
[英]When using ngFor in Angular 2, is it possible to not wrap component content with component selector tag?
我正在尝试显示用户表。 每个<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-row
并从<user-row>
模板中删除wrpapping <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>
`
})
您可以在此处使用模板标签。 当然,以所需的方式设置样式和格式。 这可能没有任何意义,所以我为您分叉并修改了一些小品 。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.