Strange behaviour while using 2 ngFor loops in Angular? - html

Question

Below are two ngFor loops in HTML which are accessing elements when each of two seperate buttons are pressed.
<button (click)='payslips()'>Get Payslips</button>
<div>
<tr *ngFor="let payslip of objPayslips">----------->doesn't work, only works when 2nd button is pressed
<td>{{payslip.MonthYear}}</td>
</tr>
<h3>{{objPayslips | json}}</h3>-------->works fine
</div>
<button (click)='payslipdetails()'>Get Payslip Details</button>
<div>
<tr *ngFor="let index of objPayslipDetails;">
<td *ngIf="index.Addition">{{index.Addition}}</td>
<td *ngIf="index.AmountAddition">{{index.AmountAddition}}</td>
</tr>
<tr>
<td>Total Earnings: </td>
<td>{{payslipAdditionTotal}}</td>
</tr>
</div>
When Get Payslips is pressed then it's Object is generated and seen. But the same objects' values in the ngFor loop doesn't show up. But if I press the second button Get Payslip Details (which has a 2nd ngFor loop) then the values of 1st ngFor loop also show up. The two methods are completely different in the backend as well as the frontend. These methods are only run in a single HTML file. There is no link between these two methods anywhere. Then I don't know where is the problem. If I remove the 2nd button code entirely then the 1st code works fine which means that the ngFor loop shows values as it should. But both of them don't work properly alongside. Please have a look. Thankyou.
Edit:
Component.ts code:
payslipdetails(){
this.payrollService.getpayslipdetails(this.PId);
this.payslipEmployee=this.payrollService.objPayslipDetails[0];
this.objPayslipDetails=this.payrollService.objPayslipDetails;
//below code is to sum all the Earnings and Deductions. So to show their total values.
this.payslipAdditionTotal= this.payrollService.objPayslipDetails.filter((obj:any) => obj.AmountAddition).reduce((accumulator:any, obj:any) => {
return accumulator + obj.AmountAddition;
}, 0);
this.payslipDeductionTotal= this.payrollService.objPayslipDetails.filter((obj:any) => obj.AmountDeduction).reduce((accumulator:any, obj:any) => {
return accumulator + obj.AmountDeduction;
}, 0);
}
payslips(){
this.payrollService.getpayslips();
this.objPayslips=this.payrollService.objPayslips;
}
Service.ts code:
getpayslips(){
const headers = new HttpHeaders().set('Content-Type', 'application/json').set('Authorization','Bearer'+' '+GlobalService.authtoken);
return this.http.post<any>('http://localhost:3000/payroll/getpayslips/',null,{headers}).subscribe(({data}) => {this.objPayslips=data;})
}
getpayslipdetails(PId:number){
const headers = new HttpHeaders().set('Content-Type', 'application/json').set('Authorization','Bearer'+' '+GlobalService.authtoken);
return this.http.post<any>('http://localhost:3000/payroll/getpayslipdetails/',{"payslipId":PId},{headers}).subscribe(({data}) => {this.objPayslipDetails=data;})
}

Answer 1

This is an asychronous issue. You should grasp this concept before trying to use it.
In your service :
return this.http.post(...) // DO NOT put a .subscribe here
In your component TS file :
this.objPayslips = this.payrollService.getpayslips();
In your component HTML file :
<tr *ngFor="let payslip of objPayslips | async">