0

Estoy intentando mostrar 3 columnas (que son 3 iconos de boostrap) dentro de una columna (herramientas), a la hora de ejecutar la aplicación únicamente se muestra la primera la primera etiqueta , ¿cómo puedo modificar el código para que muestre las 3?

porción de html:

<table mat-table [datasource]="dataSource" matSort class="full-width-table">
<ng-container matColumnDef="herramientas"> 
<th mat-header-cell *matHeaderCellDef mat-sort-header> Herramientas </th>
<td mat-cell *matCellDef="let row"><i class="bi bi-plus-circle"></i></td>
<td mat-cell *matCellDef="let row"><i class="bi bi-eye"></i></td>
<td mat-cell *matCellDef="let row"><i class="bi bi-trash"></i></td>
</ng-container> 
</table>
1
  • Estás cerrando la etiquetas con </th> en los <td>
    – lsanchezo
    Commented el 14 nov. 2022 a las 14:13

1 respuesta 1

1

Independientemente de que si estás cerrando bien o mal las etiquetas, creo que deberías hacer lo siguiente:

<table mat-table [datasource]="dataSource" matSort class="full-width-table">
<ng-container matColumnDef="herramientas"> 
<th mat-header-cell *matHeaderCellDef mat-sort-header> Herramientas </th>
<td mat-cell *matCellDef="let row">
<i class="bi bi-eye"></i>
<i class="bi bi-plus-circle"></i>
<i class="bi bi-trash">
</td>
</ng-container> 

Todo dentro de un mismo mat-cell, es más creo que estos íconos serán botones para acciones así que sería bueno que los uses como mat-icons dentro de un botón, algo así:

<table mat-table [datasource]="dataSource" matSort class="full-width-table">
<ng-container matColumnDef="herramientas"> 
<th mat-header-cell *matHeaderCellDef mat-sort-header> Herramientas </th>
<td mat-cell *matCellDef="let row">
<button mat-icon-button (click)="accion();">
<mat-icon>eye</mat-icon>
</button>

<button mat-icon-button (click)="accion();">
<mat-icon>plus-circle</mat-icon>
</button>

<button mat-icon-button (click)="accion();">
<mat-icon>trash</mat-icon>
</button>
</td>
</ng-container> 
1
  • porfa vota positivamente la pregunta Commented el 20 abr. 2023 a las 15:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.