How Can I get Difference in table row from last two values in angular 7?

问题: 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....

问题:

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?


回答1:

Following will resolve our issue & hope it will help you.

First row: Returning same value of reading.
Other row: Returning difference of current reading & above row reading.

              <tr *ngFor="let client of clients; let idx = index">
                <td>{{idx+1}}</td>
                <td>{{client.MeterReadingDate}}</td>
                <td>{{client.MeterReading1}}</td>
                <td [ngClass]="{'red': idx > 0 && getUsage(idx)}">{{idx>0?clients[idx].MeterReading1-clients[idx-1].MeterReading1:''}}</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>

css

.red {
  color: red;
}

Component

getUsage(index): number {
  return (this.clients[index].MeterReading1 - this.clients[index - 1].MeterReading1) > 50;
}
  • 发表于 2019-03-21 23:31
  • 阅读 ( 161 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除