Como fazer um cálculo em uma tabela ng2-smart-table

16/08/2022

0

Estou tentando fazer um calculo entre dois campos e quero mostrar o resultado em outro ao adicionar um novo item em uma tabale ng2-smart-table.

Veja como estou fazendo:

Estou tentando fazer um calculo entre dois campos e quero mostrar o resultado em outro ao adicionar um novo item em uma tabale ng2-smart-table.

Veja como estou fazendo:

import { Observable } from ''rxjs'';
import { Component, OnInit } from ''@angular/core'';
import { Clima } from ''src/app/model/Clima'';
import { ClimaService } from ''src/app/service/clima.service'';
import { ActivatedRoute, Router } from ''@angular/router'';
import {
  SmartTableDatepickerComponent,
  SmartTableDatepickerRenderComponent,
} from ''src/app/smart-table-datepicker/smart-table-datepicker.component'';
import { CustomComponent } from ''./custom.component'';
import { LocalDataSource, ViewCell } from ''ng2-smart-table'';

@Component({
  selector: ''app-clima'',
  templateUrl: ''./clima.component.html'',
  styleUrls: [''./clima.component.css''],
})
export class ClimaComponent implements OnInit {
  climas: Observable<Clima[]>;
  clima = new Clima();

  idFazenda: Number = +JSON.parse(localStorage.getItem(''idFazenda''));

  settings = {
    add: {
      addButtonContent: ''<i class="nb-plus"></i>'',
      createButtonContent: ''<i class="nb-checkmark"></i>'',
      cancelButtonContent: ''<i class="nb-close"></i>'',
      confirmCreate: true,
    },
    edit: {
      editButtonContent: ''<i class="nb-edit"></i>'',
      saveButtonContent: ''<i class="nb-checkmark"></i>'',
      cancelButtonContent: ''<i class="nb-close"></i>'',
      confirmSave: true,
    },
    delete: {
      deleteButtonContent: ''<i class="nb-trash"></i>'',
      confirmDelete: true,
    },
    columns: {
      dataClima: {
        title: ''Data Clima'',
        type: ''custom'',
        renderComponent: SmartTableDatepickerRenderComponent,
        width: ''250px'',
        filter: false,
        sortDirection: ''desc'',
        editor: {
          type: ''custom'',
          component: SmartTableDatepickerComponent,
        },
      },
      temperaturaMaxima: {
        title: ''Temperatura Máxima'',
        type: ''number'',
      },
      temperaturaMinima: {
        title: ''Temperatura Mínima'',
        type: ''number'',
      },
      temperaturaMedia: {
        title: ''Temperatura Média'',
        type: ''number'',
        editor: {
          type: ''custom'',
          component: CustomComponent,
          onComponentInitFunction: (instance: any) => {
            instance.save.subscribe(row => {
              //this.source.refresh();
            });
          },
        },
      },

      umidadeRelativa: {
        title: ''Umidade Relativa'',
        type: ''number'',
      },
      velocidadeVento: {
        title: ''Velecidade do Vento'',
        type: ''number'',
      },
      precipitacao: {
        title: ''Precipitação Total'',
        type: ''number'',
      },
      radiacaoMedia: {
        title: ''Radiação'',
        type: ''number'',
      },
    },
  };

  constructor(
    private climaService: ClimaService,
    private router: Router,
    private routeActive: ActivatedRoute
  ) {}

  ngOnInit(): void {
    let idFazenda: Number = +JSON.parse(localStorage.getItem(''idFazenda''));
    this.climaService.getClimaListByFazenda(idFazenda).subscribe(data => {
      //this.source.load(data);
      this.climas = data;
      //this.total = data.totalElements;
    });
  }

  novo() {
    this.clima = new Clima();
  }

  excluirClima(event) {
    if (window.confirm(''Tem certeza de que deseja excluir?'')) {
      this.climaService.deletarClima(event.data.idClima).subscribe(data => {
        // console.log("Retorno do método delete : " + data);
        //this.culturas.splice(index, 1);/*Remover da tela*/
        // this.usuarioService.getStudentList().subscribe(data => {
        //   this.students = data;
        // });
      });
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }

  salvarClima(event) {
    console.log(''Edit Event In Console'');
    console.log(event);
    if (
      this.clima.idClima != null &&
      this.clima.idClima.toString().trim() != null
    ) {
      /* Atualizando ou Editando*/

      console.log(this.clima);
      this.climaService.updateClima(this.clima).subscribe(data => {
        this.novo();
        this.router.navigate([''climaList'']);
        console.info(''Clima Atualizado: '' + data);
      });
    } else {
      event.newData.idFazenda = this.idFazenda;
      console.log(''Create Event In Console'');
      console.log(event);
      this.climaService.salvarClima(event.newData).subscribe(data => {
        /*Salvando um novo Clima */
        this.novo();
        console.info(''Gravou Clima: '' + data);
      });
      event.confirm.resolve(event.newData);
    }
  }

  onEditConfirm(event) {
    console.log(''Edit Event In Console'');
    console.log(event);
    this.climaService.updateClima(event.newData).subscribe(data => {
      this.novo();
      console.info(''Clima Atualizado: '' + data);
    });
    event.confirm.resolve(event.newData);
  }
}


Meu componente personalizado:

import { Component, Output, EventEmitter } from ''@angular/core'';

@Component({
  selector: ''custom-component'',
  template: `<td>
    <input
      [(ngModel)]="rowData.temperaturaMedia"
      (ngModelChange)="onModelChange()"
    />
  </td>`,
})
export class CustomComponent {
  rowData: any;

  @Output() save: EventEmitter<any> = new EventEmitter();

  onModelChange() {
    var tMaxima: number = this.rowData.temperaturaMaxima;
    var tMinima: number = this.rowData.temperaturaMinima;
    this.rowData.temperaturaMedia = (tMaxima + tMinima) / 2;
    this.save.emit(this.rowData);

    console.log(this.rowData.temperaturaMedia);
  }
}


Na imagem abaixo mostra que esta carregando o componente personalizado, porem não estou conseguindo calcular os campos.
https://i.stack.imgur.com/htETU.png

Se alguém tiver uma outra solução, eu quero criar uma tabela dinâmica e ao adicionar um novo item gostaria de calcular a Temperatura media de forma automática inserido apenas a Máxima e a Minima.
ítalo Araújo

ítalo Araújo

Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar