pasar - Tabla HTML en conflicto con el encabezado del componente angular y el cuerpo del componente

pasar parametros entre componentes angular 4

Question

Estoy tratando de hacer desde cero una mesa en angular. Quiero que mi encabezado y cuerpo sean dinámicos.

<my-datatable>
<my-header header></my-header>
<my-body body></my-body>
</my-datatable>

y mi componente de encabezado es

<thead >
<tr>
<th style="text-align: left;" *ngFor="let field of fields | async ">
{{ field }}
</th>
</tr>
</thead>

mi componente de cuerpo es

<tbody>
<tr *ngFor="let item of items | async ; let rowIndex = index; " >
<td *ngFor="let field of fields | async; let colIndex = index;" >
{{ item[field] }}
</td>
</tr>
</tbody>

mi componente datatable

<table>
<ng-content select="[header]"></ng-content>
<ng-content select="[body]"></ng-content>
</table>

La tabla se muestra pero se muestra como dos tablas, incluso cuando inspecciono solo se muestra una tabla.

esto es un plnkr con el ejemplo

Answer 1

Arreglará su problema configurando la tabla de etiquetas con style = "display: grid"

<table style="display:grid">

En cualquier caso, deberá sincronizar sus encabezados con su cuerpo "manualmente"

Esta es la solución , si eliminas la cuadrícula, tendrás tu problema