I have a datatable as shown in the image:
I am adding data using this form:
When I Add Data Using Form, Value In "Reading" Will be Shown Under Reading Column In Table.
Now I want to calculate the difference between newly added value and last value of "Reading" column.
And Want To Show that Difference Under Usage Column.
Here is my code for adding record:
SaveMeterReading() {
this.ObjMeterReadingModel.OrganizationId = this.AuthMember.OrganizationId.toString();
this.ObjMeterReadingModel.CreatedBy = this.AuthMember.UserName;
this.MeterReadingService.SaveMeterReading(this.ObjMeterReadingModel).subscribe(
response => {
if(response > 0){
this.display = 'none';
this.RefreshGrid();
this.toastr.successToastr('Successfully Added', 'Success!');
}
},
error => {
console.log("Err " + error);
}
);
Code for getting data:
GetAllMeterReading() {
this.MeterReadingService.GetAllMeterReading().subscribe(
response => {
this.clients = response;
this.chRef.detectChanges();
const table: any = $('table');
this.dataTable = table.DataTable({
"order": [],
"aoColumns": [
{ "width": "10%","bSortable": false },
{ "width": "30%"},
{ "width": "20%"},
{ "width": "20%"},
{ "width": "20%","bSortable": false }
],
"lengthChange": false
// "dom": '<"left"f>r<t>ip'
});
this.countno = 'false';
},
error => {
console.log("Err " + error);
}
);
}
Service For Getting Data:
GetAllMeterReading(): Observable<any> {
return this.http.get(env.ROOT + "MeterReading/GetAllMeterReading").pipe(
map((response: Response) => {
return response.json();
}),
catchError((error: Response) => {
return throwError(console.log(error));
})
);
}
HTML for displaying data in table:
<table class="table table-hover" cellspacing="0">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Reading</th>
<th>Usage</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let client of clients; let idx = index">
<td>{{idx+1}}</td>
<td>{{client.MeterReadingDate}}</td>
<td>{{client.MeterReading1}}</td>
<td></td>
<td><button class="btn btn-primary" (click)="UpdateMeterReading(client.Id)"><i
class="fa fa-edit"></i></button><button class="btn btn-default ml-10"
(click)="showConfirmBoxForDeleteMeterReading(client.Id)"><i class="fa fa-times"></i></button>
</td>
</tr>
</tbody>
</table>
How can I achieve this in Angular 7?