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.
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; } });