Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

564
Vistas
¿Cómo agregar color a una fila de la segunda tabla usando p-table en angular?

Tengo una tabla p y la estoy usando para completar los contenidos según los requisitos en dos tablas. Quiero agregar color a la fila de la segunda tabla de acuerdo con una condición si el valor de la columna suspendida es igual a T, entonces quiero agregar color amarillo a esa fila. Componente de datos.html-

 <p-table [columns]="columns" [value]="listItems" dataKey="id" [rowHover]=true styleClass="p-datatable-striped p- datatable-responsive-demo" selectionMode="multiple" [(selection)]="selectedItem"> <ng-template pTemplate="header" let-columns> <tr> <th pSortableColumn *ngFor="let col of getKeys(columns)" pReorderableColumn pResizableColumn> {{col}} </th> </tr> </ng-template> <ng-template pTemplate="body" let-block let-columns="columns" let-rowIndex="rowIndex"> <tr [pContextMenuRow]="block" [pSelectableRow]="block" [pSelectableRowIndex]="rowIndex"> <td *ngFor="let col of getKeys(columns)" (click)=fetchDataArray(block)> {{block[col]}} </td> </tr> </ng-template>

Al hacer clic en una fila de la primera tabla, se llama a la función fetchDataArray mediante la cual se obtienen los datos de la segunda tabla.

En el archivo ComponentBox, llamo a la tabla p que se ha declarado y paso los valores necesarios para las tablas.

Component-Box.html

 <ng-template #tabdata> <p-scrollPanel [style]="{width: '100%', height: '100%'}" <app-data-table [listItems]="data" [selectedEntity]="entity" [entityData]="columnData" (selectedTradeEvent)="fetchDataArray($event)"></app-data-table> // This gives us first table data and on click event which is selectedTradeEvent is called click of a row to fetch data for second table. </p-scrollPanel> <p-scrollPanel [style]="{width: '100%', height: '100%'}" <app-data-table [listItems]="table.value" [selectedEntity]="table.key" [entityData]="columnData"> </app-data-table> // This gives us second table data </p-scrollPanel> </ng-template>

Archivo Component-Box.ts-

 fetchDataArray(selectedItem){ this.entityData[this.entity]["showTables"].forEach(val=>{ this.service.sendGetRequest('getData?id'+selectedItem).then(data=> { this.showTables.set("ABC",data); data.forEach(val=>{ for(var key of Object.keys(val)){ if(key==="C1" && val[key]==="T"){ //To color this row only } }); }); }); }

Quiero agregar color a la fila cuando mi condición if es verdadera, es decir, obtengo la fila que satisface la condición.

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

prueba esto

 <tr [style.background]="block.color ? block.color : ''" [pContextMenuRow]="block" [pSelectableRow]="block" [pSelectableRowIndex]="rowIndex"> <td *ngFor="let col of getKeys(columns)" (click)=fetchData(block)> {{block[col]}} </td> </tr>

Aquí no entiendo cómo usas block. En mi opinión, debería ser <ng-template pTemplate="body" let-data ...> y luego en <tr ...> pasa data , no block

Luego en tu archivo .ts

 data.forEach(val=>{ for(var key of Object.keys(val)){ if(key==="suspensed" && val[key]==="T"){ val.color = 'red'; } else { val.color = null; } });
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda