jquery - 如何获得表行与 Angular 7 中最后两个值的差异？

Question

我有一个数据表，如图所示:

我正在使用此表单添加数据:

当我使用表单添加数据时，“阅读”中的值将显示在表格中的阅读列下。

现在我想计算“Reading”列新添加的值与最后一个值之间的差异。

并希望在使用列下显示差异。

这是我添加记录的代码:

 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);
      }
    );

获取数据的代码:

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);
      }
    );
  }

获取数据的服务:

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:

<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>

如何在 Angular 7 中实现这一目标？

Answer 1

以下内容将解决我们的问题，希望对您有所帮助。

第一行:返回相同的读数值。
其他行:返回当前读数与上一行读数的差值。

              <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;
}

组件

getUsage(index): number {
  return (this.clients[index].MeterReading1 - this.clients[index - 1].MeterReading1) > 50;
}