Я пытаюсь отобразить таблицу пользователей. Каждый тег <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 и удалить тег <tr> из шаблона <user-row>.
Но что, если мне нужно показать список заказов для каждого пользователя в той же таблице сразу после <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>
`
})
