Я изо всех сил пытаюсь найти способ сделать это. В родительском компоненте шаблон описывает элемент table
и его thead
, но делегирует отображение tbody
другому компоненту, например:
<table>
<thead>
<tr>
<th>Name</th>
<th>Time</th>
</tr>
</thead>
<tbody *ngFor="let entry of getEntries()">
<my-result [entry]="entry"></my-result>
</tbody>
</table>
Каждый компонент myResult отображает собственный тег tr
, в основном так:
<tr>
<td>{{ entry.name }}</td>
<td>{{ entry.time }}</td>
</tr>
Причина, по которой я не помещаю это прямо в родительский компонент (исключая необходимость в компоненте myResult), заключается в том, что компонент myResult на самом деле более сложный, чем показано здесь, поэтому я хочу поместить его поведение в отдельный компонент и файл.
В результате DOM выглядит плохо. Я считаю, что это неверно, поскольку tbody
может содержать только tr
элементы (см. MDN), но мои сгенерированные (упрощенные) DOM:
<table>
<thead>
<tr>
<th>Name</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<my-result>
<tr>
<td>Bob</td>
<td>128</td>
</tr>
</my-result>
</tbody>
<tbody>
<my-result>
<tr>
<td>Lisa</td>
<td>333</td>
</tr>
</my-result>
</tbody>
</table>
Есть ли способ получить то же самое, что и рендеринг, но без тэга wrapping <my-result>
, и все еще используя компонент, который должен отвечать за визуализацию строки таблицы?
Я просмотрел ng-content
, DynamicComponentLoader
, ViewContainerRef
, но они, похоже, не дают решения для этого, насколько я могу видеть.