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:

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