如何使用 angular 中的 p-table 为第二行 table 添加颜色？

Question

我有一个 p-table，我正在使用它根据要求在两个 table 中填充内容。我想根据条件向第二行 table 添加颜色，如果列值暂停等于 T，那么我想向该行添加黄色。数据-Component.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>

单击第一个 table 行的 fetchDataArray 函数被调用，第二个 table 数据被调用。

在 ComponentBox 文件中，我正在调用已声明的 p-table 并传递 table 所需的值。

分量-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>

组件-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 
}

});
});
});
}

我想在 if 条件为真时为行添加颜色，即我得到满足条件的行。

Answer 1

试试这个

<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>

这里我不明白你是怎么使用block的。 IMO 它应该是 <ng-template pTemplate="body" let-data ...> 然后在 <tr ...> 你通过 data 而不是 block

然后在你的 .ts 文件中

data.forEach(val=>{
  for(var key of Object.keys(val)){
  if(key==="suspensed" && val[key]==="T"){
    val.color = 'red';
  } else {
    val.color = null;
  }
});

如何使用 angular 中的 p-table 为第二行 table 添加颜色？

How to add color to a row of second table using p-table in angular?

css

primeng

angular

primeng-datatable