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