PrimeNG pTable动态行实现单行独立支付验证逻辑问题

你当前使用组件级全局变量check控制所有行的验证状态展示，点击任意校验按钮时会把这个全局变量设为true，所有行的对勾显示判断都依赖这个全局变量，因此会出现所有行同时被标记为已验证的问题，没有做行级的状态隔离。

• 移除全局的check变量，将验证状态绑定到每一行的独立数据对象上
• 点击校验按钮时传入当前行数据，仅修改当前行的验证状态
• 模板中状态判断直接读取当前行自身的验证标记，不再依赖全局变量

修改后的组件TS代码 #

import { DataSource } from '@angular/cdk/collections';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Subject } from 'rxjs';
import { AllServicesService } from 'src/app/Services/all-services.service';

@Component({
  selector: 'app-payment-verification',
  templateUrl: './payment-verification.component.html',
  styleUrls: ['./payment-verification.component.scss']
})
export class PaymentVerificationComponent implements OnInit {
  dataSource: any[] = [];
  
  status: any
  data: any
  input_data:[]
  displayedCols:any[];  
  transactionid:any;
  selected: any;
  constructor(
    private allService: AllServicesService,
    private frmBuilder: FormBuilder
  ) {  this.displayedCols =[
    {field: 'CustID', header:'Customer ID'},
    {field: 'Cust_Name',header:'Name'},
    {field: 'date', header:'Date'},
    {field: 'Amount', header:'Amount'},
    {field: 'BankName',header:'Bank Name'},
    {header:'Transaction ID', field: 'TransactionID', editable:true, state:false},
  ];}
  
  ngOnInit() {
    this.verifytransaction(this.status);
  }
  // 接收当前行数据作为入参
  verify(rowData: any){
    console.log("clicked")
    console.log('校验数据: ' + 'UserID:' + rowData.CustID + 'Transaction ID:' + rowData.TransactionID);
    // 此处可补充实际的交易校验接口调用逻辑
    // 仅更新当前行的验证状态
    rowData.isVerified = true;
  }
  verifytransaction(status) {
    this.allService.paymentVerification(status)
      .subscribe(res => {
        this.dataSource = res.data
        // 为每条返回的交易记录初始化验证状态
        this.dataSource.forEach(item => {
          item.isVerified = false;
        })
      })
  } 
}

修改后的组件模板代码 #

<div class="jumbotron">
    <p-table [value]="dataSource" selectionMode="single" [(selection)]="selected" [columns]="displayedCols">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
                <th>
                    Status
                </th>
                <th>
                    Submit
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns"  let-rowIndex="rowIndex">
            <tr [pSelectableRow]="rowData">
                <td *ngFor="let col of columns" [pEditableColumn] [ngClass]="{'disable-td' : !col.editable}">
                      <div *ngIf="!col.editable">
                        {{rowData[col.field]}}
                      </div>
                      <p-cellEditor *ngIf="col.editable">
                              <ng-template pTemplate="input">
                                  <input pInputText type="text" [(ngModel)]="rowData[col.field]" #trd required>
                              </ng-template>
                              <ng-template pTemplate="output">
                                  {{rowData[col.field]}}
                              </ng-template>   
                      </p-cellEditor>
                </td>
                <td >
                    <div >
                        <!-- 按钮显示逻辑绑定当前行状态，点击时传入当前行数据 -->
                        <button *ngIf="!rowData.isVerified" pButton type="button"  (click)="verify(rowData)">Verify</button>
                        <span>
                            <!-- 对勾显示逻辑绑定当前行状态 -->
                            <i class="pi pi-check" *ngIf="rowData.isVerified"></i>
                        </span>
                    </div>
                    
                </td>
            </tr>
        </ng-template>
        </p-table>
</div>

初始表格渲染效果（TransactionID列支持编辑） #

修复后效果：仅被点击的对应行会标记为已验证，其余行状态不受影响 #

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