Como fazer um cálculo em uma tabela ng2-smart-table
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:
Meu componente personalizado:
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.
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
Curtidas 0