![](/img/trans.png)
[英]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.