PrimeNG ptable - implement different logic for all the dynamic rows

Viewed 46

I'm working on a Payment verification functionality in which the user enters the transaction id and a button click checks it.

The table of all the transactions are fetched from an API which then creates multiple rows dynamically using the pTable of Prime NG. The problem is, if i implement a checking logic on any one of the transaction records, all of them are verified.

I need to check each transaction separately.

Here's my component ts file

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
  check: boolean = false;
  input_data:[]
  displayedCols:any[];  
  transactionid:any;
  // @ViewChild('transactionId') transactionId:HTMLementRef;
  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},
    // {field: 'status', header:' Status'},
    // {field: 'submit', header: 'Submit'}
  ];}
  
  ngOnInit() {
   
    this.verifytransaction(this.status);
  }
  verify(){
    console.log("clicked")
      this.dataSource.forEach(function(rowData){
        console.log('data: ' + 'UserID:' + rowData.CustID + 'Transaction ID:' + rowData.TransactionID);

      });
    //  this.dataSource.forEach(function(rowData) {
    //     console.log(rowData.TransactionID)
    //  });
    this.check = true;
    }
  verifytransaction(status) {
    this.allService.paymentVerification(status)
      .subscribe(res => {
        this.dataSource = res.data
        this.dataSource.map(res => { res.Amount })
        // console.log(this.dataSource);
      })

  } 
}

My component template is as follows:

<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="!check" pButton type="button"  (click)="verify()">Verify</button>
                        <span>
                            <i class="pi pi-check" *ngIf="check"></i>
                        </span>
                    </div>
                    
                </td>
            </tr>
        </ng-template>
        </p-table>
</div>
   

Here's the table that is created when the API returns the data. The TransactionID column is editable: Table

on clicking any of the verify buttons, all are marked as verified. on clicking

1 Answers

What is triggering the change is the single variable check from your component body.

So when you change it once, it applies the change to all rows.

You need to make so there is a check variable per data row.

on your subscription, add check:

this.allService.paymentVerification(status)
      .subscribe(res => {
        this.dataSource = res.data.map(item => {...item, check: false}) // <== here
        this.dataSource.map(res => { res.Amount })
        // console.log(this.dataSource);
      })

and update your "verify" function:

verify(rowData){
  rowData.check = true;
}

and on your template:

<td >
  <div >
    <button *ngIf="!rowData.check" pButton type="button"  (click)="verify(rowData)">Verify</button>
    <span><i class="pi pi-check" *ngIf="rowData.check"></i></span>
 </div>                    
</td>
Related