0
328
Vistas¿La fila de la tabla angular no abarca la tabla como se esperaba?
Tengo una aplicación Angular muy simple que crea una tabla de elementos, digamos "productos".
Tengo un componente llamado "Productos" y un subcomponente (si esa es la terminología) llamado producto-elemento.
Mi problema es con el intervalo de columnas de las filas del subcomponente. Como prueba, hice lo siguiente para mostrar mi problema:
En el componente "Productos", tengo el siguiente HTML:
<table [ngClass]="{'blueTable':true}"> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> </tr> </thead> <tbody> <tr> <td>test c1</td> <td>test c2</td> <td>test c3</td> </tr> <!-- <ng-container *ngFor="let docketItem of docketList"> --> <ng-container *ngFor="let number of [0,1,2]"> <app-product-item></app-product-item> </ng-container> </tbody> <tfoot> <tr> <td>foot 1</td><td>foot 2</td><td>foot 3</td> </tr> </tfoot> </table>En el componente "producto-elemento", tengo el siguiente HTML:
<tr> <td>cA</td> <td>cB</td> <td>cC</td> </tr>Esta es la salida:
Mi objetivo es que cada fila de producto-elemento sea una nueva fila en la tabla. ¿Qué no estoy entendiendo?
1 Respuestas
Responde la pregunta0
Un elemento tr debe ser un hijo directo del elemento table o de thead/tbody/tfoot
Si verifica en su DOM, tiene dentro del tbody un elemento de elemento de producto de aplicación que contiene el tr
Supongo que intentaste arreglarlo usando ng-container y es por eso que no lo hiciste simplemente:
<app-product-item *ngFor="let number of [0,1,2]"></app-product-item>Pero aún así, el tr está dentro de la aplicación-producto-elemento
Debe usar el selector de atributos y luego, en el componente "Productos", tener lo siguiente:
<tbody> <tr app-product-item *ngFor="let number of [0,1,2]"></tr> </tbody>En el componente "producto-elemento", elimine el tr
Y en el archivo ts "producto-elemento", cambie el selector a:
@Component({ selector: '[app-product-item]', ...