如何基于行索引修改Primeng可编辑表格的行背景色

针对你的需求，核心是给每行数据绑定独立的校验状态，而非用全局变量控制所有行样式。具体实现步骤如下：

1. 给每行数据添加校验状态字段 #

在API返回数据后，为每个数据项新增isValid字段，初始值可根据Value和Size先做一次校验：

// 示例：获取数据时初始化校验状态
fetchData() {
  this.apiService.getData().subscribe(data => {
    this.valProd = data.map(item => ({
      ...item,
      // 初始校验：判断Value长度是否匹配Size要求
      isValid: item.Value?.length === item.Size
    }));
  });
}

2. 修改表格模板，绑定行样式 #

将<tr>的ngStyle绑定到当前行的isValid状态，同时修正模板里的重复变量问题：

<p-table [value]="valProd" responsiveLayout="scroll" (onEditInit)="onEditInit($event)" (onEditCancel)="onCancelInit($event)"> 
  <ng-template pTemplate="header"> 
    <tr> 
     <th>Name</th> 
     <th>Value</th> 
     <th>Size</th> 
    </tr> 
  </ng-template> 
   <ng-template pTemplate="body" let-rowData> 
      <!-- 根据当前行的校验状态设置背景色 -->
      <tr [ngStyle]="{'background-color': rowData.isValid ? '#d4edda' : '#f8d7da'}"> 
      <td>
        <p-cellEditor>
         <ng-template pTemplate="output">
           {{ rowData.Name}}
         </ng-template>
       </p-cellEditor>
     </td>
         <td pEditableColumnField="Value"> 
          <p-cellEditor> 
           <ng-template pTemplate="input"> 
            <input pInputText 
              type="text" 
              [(ngModel)]="rowData.Value" 
              name="value"
              (change)="checkWriteValue(rowData)"
              (keydown.enter)="checkWriteValue(rowData)"
            > 
          </ng-template> 
          <ng-template pTemplate="output"> 
            {{rowData.Value}}
          </ng-template> 
        </p-cellEditor> 
      </td> 

      <td>
        <p-cellEditor>
         <ng-template pTemplate="output">
           {{ rowData.Size}}
         </ng-template>
       </p-cellEditor>
     </td>
   </tr> 
 </ng-template> 
</p-table>   

3. 完善校验方法，更新行状态 #

修改checkWriteValue方法，直接传入整行数据，实时更新该行的isValid状态：

checkWriteValue(rowData: any) {
  // 根据业务需求调整校验逻辑，这里适配HasFixedLength的判断
  const isValid = rowData.HasFixedLength 
    ? rowData.Value?.length === rowData.Size 
    : rowData.Value?.length <= rowData.Size;
  
  rowData.isValid = isValid;
}

额外修正点 #

• 移除冗余的[pEditableColumn]="rowData.Value"，pEditableColumnField已足够指定编辑字段
• 修正keydown.enter事件里的rowData.name为rowData.Name，保持字段名大小写一致
• 删除重复的let-valProd变量，避免模板变量冲突

内容的提问来源于stack exchange，提问作者Brian