Как я могу получить разницу в строке таблицы из последних двух значений в угловых 7?

Question

У меня есть данные, как показано на рисунке:

Я добавляю данные, используя эту форму:

Когда я добавляю данные с помощью формы, значение в столбце «Чтение» будет отображаться в столбце «Чтение» в таблице.

Теперь я хочу вычислить разницу между вновь добавленным значением и последним значением столбца «Чтение».

И хочу показать эту разницу в столбце использования.

Вот мой код для добавления записи:

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

Component

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