Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

563
Visualizações
¿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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda